下载鸥 > 网站下载 > 开发教程 > JS/JQuery

原生js检查标题、留言不为空,手机、邮箱合规

27 2024-06-13 18:00:03

收藏
一个简单的页面验证还使用jQuery比较麻烦,而且浪费带宽。所以,鸥哥这里分享一段原生js的验证。
 

button为普通按钮时

html代码

<form id="myForm">  
    <input type="text" name="phone" placeholder="手机号码">  
    <input type="email" name="email" placeholder="邮箱地址">  
    <input type="text" name="title" placeholder="标题">  
    <textarea name="message" placeholder="留言"></textarea>  
    <button type="button" onclick="validateForm()">提交</button>  
</form>
 

js代码

function validateForm() {  
    var form = document.getElementById('myForm');  
    var phoneInput = form.elements['phone'];  
    var emailInput = form.elements['email'];  
    var titleInput = form.elements['title'];  
    var messageTextarea = form.elements['message'];  
  
    // 检查手机号码(简单示例,仅检查是否为11位数字)  
    function isValidPhone(phone) {  
        var regex = /^\d{11}$/; // 假设手机号码为11位数字  
        return regex.test(phone);  
    }  
  
    // 检查邮箱地址  
    function isValidEmail(email) {  
        var regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; // 简单的邮箱验证正则表达式  
        return regex.test(email);  
    }  
  
    // 检查标题和留言是否为空  
    function isNotEmpty(value) {  
        return value.trim() !== '';  
    }  
  
    // 验证手机号码  
    if (!isValidPhone(phoneInput.value)) {  
        alert('手机号码格式不正确!');  
        return false; // 验证失败,停止后续验证  
    }  
  
    // 验证邮箱地址  
    if (!isValidEmail(emailInput.value)) {  
        alert('邮箱地址格式不正确!');  
        return false; // 验证失败,停止后续验证  
    }  
  
    // 验证标题是否为空  
    if (!isNotEmpty(titleInput.value)) {  
        alert('标题不能为空!');  
        return false; // 验证失败,停止后续验证  
    }  
  
    // 验证留言是否为空  
    if (!isNotEmpty(messageTextarea.value)) {  
        alert('留言不能为空!');  
        return false; // 验证失败,停止后续验证  
    }  

    // 验证其他独立字段
    if(obj.count!=null)
    {
        if(obj.count.value=='')
        {
            document.getElementsByClassName("warn-count")[0].style.display = "block";
            return false;
        }
    }
  
    // 所有验证都通过,可以提交表单或执行其他操作  
    alert('表单验证通过!');  
    // 例如:form.submit(); // 如果要提交表单到服务器,取消注释这行代码  
    return true;  
}
 

button为submit时

html代码

<form id="myForm" onsubmit="return validateForm(event)">  
    <input type="text" name="phone" placeholder="手机号码">  
    <input type="email" name="email" placeholder="邮箱地址">  
    <input type="text" name="title" placeholder="标题">  
    <textarea name="message" placeholder="留言"></textarea>  
    <button type="submit">提交</button>  
</form>  
 

js代码

function validateForm() {  
    event.preventDefault();
    var form = document.getElementById('myForm');  
    var phoneInput = form.elements['phone'];  
    var emailInput = form.elements['email'];  
    var titleInput = form.elements['title'];  
    var messageTextarea = form.elements['message'];  
  
    // 检查手机号码(简单示例,仅检查是否为11位数字)  
    function isValidPhone(phone) {  
        var regex = /^\d{11}$/; // 假设手机号码为11位数字  
        return regex.test(phone);  
    }  
  
    // 检查邮箱地址  
    function isValidEmail(email) {  
        var regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; // 简单的邮箱验证正则表达式  
        return regex.test(email);  
    }  
  
    // 检查标题和留言是否为空  
    function isNotEmpty(value) {  
        return value.trim() !== '';  
    }  
  
    // 验证手机号码  
    if (!isValidPhone(phoneInput.value)) {  
        alert('手机号码格式不正确!');  
        return false; // 验证失败,停止后续验证  
    }  
  
    // 验证邮箱地址  
    if (!isValidEmail(emailInput.value)) {  
        alert('邮箱地址格式不正确!');  
        return false; // 验证失败,停止后续验证  
    }  
  
    // 验证标题是否为空  
    if (!isNotEmpty(titleInput.value)) {  
        alert('标题不能为空!');  
        return false; // 验证失败,停止后续验证  
    }  
  
    // 验证留言是否为空  
    if (!isNotEmpty(messageTextarea.value)) {  
        alert('留言不能为空!');  
        return false; // 验证失败,停止后续验证  
    }  

    // 验证其他独立字段
    if(obj.count!=null)
    {
        if(obj.count.value=='')
        {
            document.getElementsByClassName("warn-count")[0].style.display = "block";
            return false;
        }
    }
  
    if (isValidPhone(phoneInput.value) &&   
        isValidEmail(emailInput.value) &&   
        isNotEmpty(titleInput.value) &&   
        isNotEmpty(messageTextarea.value)) {    
        form.submit();
    } else {  
        alert('表单验证失败,请检查输入!');  
    }  
}

虽然看着复杂,但复制粘贴就能用,还节约了jQuery的带宽和内存。

本文地址:https://xzo.com.cn/develop/js/1271.html

有帮助,很赞!

信息来源:下载鸥
导出教程 下载word版教程
发表评论 共有条评论
关于JS/JQuery


JavaScript(简称“JS”) 是一种具有函数优先的轻量级,解释型或即时编译型的编程语言。JavaScript 基于原型编程、多范式的动态脚本语言,并且支持面向对象、命令式和声明式(如函数式编程)风格。

JavaScript十分强大,不管是前端页面开发、视觉动态渲染、数据交互还是后端逻辑处理,都可以通过JS实现。虽然它是作为开发Web页面的脚本语言而出名,但是它也被用到了很多非浏览器环境中。

推荐JS/JQuery开发教程
JS怎样做倒计时效果?
JS怎样做倒计时效果?

在各种盛大的节日、活动前,网站制作倒计时特效可有效给活动页引流。那么,怎样...

1 397
jQuery怎样监听鼠标滚动是向上还是向下的状态?
jQuery怎样监听鼠标滚动是向上还是向下的状态?

知乎鼠标向下滚动显示文章标题,向上滚动显示栏目;又或者向下滚动到底部时异步...

0 501
jquery怎样获取textarea用户输入的行数?
jquery怎样获取textarea用户输入的行数?

jQuery是一个相当好用的js插件,通过jquery我们可以实现很多功能,例如今天要介...

0 494
Superslide响应式页面直接应用手机端技巧介绍
Superslide响应式页面直接应用手机端技巧介绍

如果是响应式网站,那么用superslide做轮播图需要做两个,这无疑是非常不方便的...

1 422
$(window).height() 和 $(document).height()有什么不同?
$(window).height() 和 $(document).height()有什么不同?

我们常用$(window).height() 和 $(document).height()来监听当前高度,但这个...

1 330
swiper轮播图空白案例记录
swiper轮播图空白案例记录

今天鸥哥在用swiper做轮播图时,轮播效果虽然没问题,但只显示第一张,后面的图片...

0 334
JS控制输入字数的两个方案
JS控制输入字数的两个方案

我们在文章输入框中经常有用到字数控制,但字数控制有两种方案,一种是字母/空...

0 343
js点击追加信息到textarea
js点击追加信息到textarea

通过灵活运用js,我们可以轻松实现点击追加相关信息到textarea的功能。这个功...

0 519
推荐插件
帝国cms百度文字识别ocr接口对接插件
帝国cms百度文字识别ocr接口对接插件

许多网站会做一些小功能小插件给客户使用以增强用户黏性,比如图片转文字,这种...

0 376
帝国cms网站会员登录与退出历史记录日志插件
帝国cms网站会员登录与退出历史记录日志插件

帝国cms默认只有上次登录时间与ip,没有一个记录清单,所以今天,我们分享这个帝...

0 279
帝国cms智能自动审核按星期几审核指定栏目带推送插件
帝国cms智能自动审核按星期几审核指定栏目带推送插件

采集站的必备资源是自动审核,要做到日收录也离不开定时发布。而本插件的自动...

0 1147
帝国cms百度AI图像清晰度增强api接口对接插件
帝国cms百度AI图像清晰度增强api接口对接插件

通过本插件,可以实现帝国cms网站对接百度云api实现图像清晰度增强的功能。经...

0 417
帝国cms百度AI图像无损放大api接口对接插件
帝国cms百度AI图像无损放大api接口对接插件

通过本插件,可以实现帝国cms网站对接百度云api实现图像无损放大的功能。经过...

0 349
帝国cms多栏目多数据表自动审核推送插件
帝国cms多栏目多数据表自动审核推送插件

本插件基于帝国cms帝国cms每日自动审核插件,在自动审核指定条数信息的基础上...

0 797
帝国cms百度AI图像去雾api接口对接插件
帝国cms百度AI图像去雾api接口对接插件

通过本插件,可以实现帝国cms网站对接百度云api实现图像去雾的功能。经过实际...

0 371
帝国cms百度AI黑白图像上色api接口对接插件
帝国cms百度AI黑白图像上色api接口对接插件

百度开放了系列AI功能api如图像上色、图像去雾、图像修复、无损放大、清晰...

0 328
客服QQ:341553759
扫码咨询 常见问题 >
官方交流群:90432500
点击加入