首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

常用javascript表单验证汇总

Posted in Javascript onJuly 20, 2020

实例讲解：验证输入的是否是数字，是否满足数字位数，如果错误，并进行友情提醒。

效果图：

常用javascript表单验证汇总

常用javascript表单验证汇总

<!DOCTYPE html>
<html>
<body>

<h1>我的第一段 JavaScript</h1>

<p>请输入数字。如果输入值不是数字，浏览器会弹出提示框。</p>

<input id="demo" type="text">

<script>
function myFunction()
{
var x=document.getElementById("demo").value;
if(x==""){
alert("输入不能为空");
return;
}

if(isNaN(x)){
alert("请输入数字");
return;
}

if(x.length!=6){
alert("请输入6位数字");
return;
}

}
</script>
<button type="button" onclick="myFunction()">点击这里</button>
</body>
</html>

上面这个实例包含了许多常用的表单验证的代码，下面分享给大家：

1、验证表单

2、验证昵称

3、计算昵称长度

4、验证昵称是否存在

5、验证手机号

6、验证密码

7、验证邮箱

8、验证验证码

9、判断是否选中

 注册验证为例：

<script language="JavaScript" src="js/jquery-1.9.1.min.js" type="text/javascript"></script>

//验证表单
   function vailForm(){
    var form = jQuery("#editForm");
    if(!vailNickName())return;
    if(!vailPhone())return;
    if(!vailPwd())return;
    if(!vailConfirmPwd())return;
    if(!vailEmail())return;
    if(!vailCode())return;
    if(!vailAgree())return;
    form.submit();
   }

//验证昵称
   function vailNickName(){
    var nickName = jQuery("#nickName").val();
    var flag = false;
    var message = "";
    var patrn=/^\d+$/;
    var length = getNickNameLength();
    if(nickName == ''){
     message = "昵称不能为空！";
    }else if(length<4||length>16){
     message = "昵称为4-16个字符！";
    } else if(checkNickNameIsExist()){
     message = "该昵称已经存在，请重新输入！";
    }else{
     flag = true;
    }
    if(!flag){
     jQuery("#nickNameDiv").removeClass().addClass("ui-form-item has-error");
     jQuery("#nickNameP").html("");
     jQuery("#nickNameP").html("<i class=\"icon-error ui-margin-right10\"> <\/i>"+message);
     //jQuery("#nickName").focus();
    }else{
     jQuery("#nickNameDiv").removeClass().addClass("ui-form-item has-success");
     jQuery("#nickNameP").html("");
     jQuery("#nickNameP").html("<i class=\"icon-success ui-margin-right10\"> <\/i>该昵称可用");
    }
    return flag;
   }

//计算昵称长度
   function getNickNameLength(){
    var nickName = jQuery("#nickName").val();
    var len = 0;
   for (var i = 0; i < nickName.length; i++) {
     var a = nickName.charAt(i);



//函数格式：stringObj.match(rgExp) stringObj为字符串必选 rgExp为正则表达式必选项



//返回值：如果能匹配则返回结果数组，如果不能匹配返回null
     if (a.match(/[^\x00-\xff]/ig) != null){
     len += 2;
    }else{
     len += 1;
    }
   }
    return len;
   }

//验证昵称是否存在
   function checkNickNameIsExist(){
    var nickName = jQuery("#nickName").val();
    var flag = false;
    jQuery.ajax(
    { url: "checkNickName?t=" + (new Date()).getTime(),
     data:{nickName:nickName},
     dataType:"json",
       type:"GET",
       async:false,
       success:function(data) {
       var status = data.status;
       if(status == "1"){
        flag = true;
       }
      }
   });
   return flag;
   }

//验证手机号
   function vailPhone(){
    var phone = jQuery("#phone").val();
    var flag = false;
    var message = "";
    //var myreg = /^(((13[0-9]{1})|159|153)+\d{8})$/;
    var myreg = /^(((13[0-9]{1})|(14[0-9]{1})|(17[0-9]{1})|(15[0-3]{1})|(15[5-9]{1})|(18[0-3]{1})|(18[5-9]{1}))+\d{8})$/;
    if(phone == ''){
     message = "手机号码不能为空！";
    }else if(phone.length !=11){
     message = "请输入有效的手机号码！";
    }else if(!myreg.test(phone)){
     message = "请输入有效的手机号码！";
    }else if(checkPhoneIsExist()){
     message = "该手机号码已经被绑定！";
    }else{
     flag = true;
    }
    if(!flag){
     jQuery("#phoneDiv").removeClass().addClass("ui-form-item has-error");
     jQuery("#phoneP").html("");
     jQuery("#phoneP").html("<i class=\"icon-error ui-margin-right10\"> <\/i>"+message);
     //jQuery("#phone").focus();
    }else{
     jQuery("#phoneDiv").removeClass().addClass("ui-form-item has-success");
     jQuery("#phoneP").html("");
     jQuery("#phoneP").html("<i class=\"icon-success ui-margin-right10\"> <\/i>该手机号码可用");
    }
    return flag;
   }

//验证手机号是否存在
    function checkPhoneIsExist(){
     var phone = jQuery("#phone").val();
     var flag = true;
     jQuery.ajax(
     { url: "checkPhone?t=" + (new Date()).getTime(),
      data:{phone:phone},
      dataType:"json",
        type:"GET",
        async:false,
        success:function(data) {
        var status = data.status;
        if(status == "0"){
         flag = false;
        }
       }
    });
    return flag;
    }

 //验证密码
   function vailPwd(){
    var password = jQuery("#password").val();
    var flag = false;
    var message = "";
    var patrn=/^\d+$/;
    if(password ==''){
     message = "密码不能为空！";
    }else if(password.length<6 || password.length>16){
     message = "密码6-16位！";
    }else if(patrn.test(password)){
     message = "密码不能全是数字！";
    }else{
     flag = true;
    }
    if(!flag){
     jQuery("#passwordDiv").removeClass().addClass("ui-form-item has-error");
     jQuery("#passwordP").html("");
     jQuery("#passwordP").html("<i class=\"icon-error ui-margin-right10\"> <\/i>"+message);
     //jQuery("#password").focus();
    }else{
     jQuery("#passwordDiv").removeClass().addClass("ui-form-item has-success");
     jQuery("#passwordP").html("");
     jQuery("#passwordP").html("<i class=\"icon-success ui-margin-right10\"> <\/i>该密码可用");
    }
    return flag;
   }

//验证确认密码
   function vailConfirmPwd(){
    var confirmPassword = jQuery("#confirm_password").val();
    var patrn=/^\d+$/;
    var password = jQuery("#password").val();
    var flag = false;
    var message = "";
    if(confirmPassword == ''){
     message = "请输入确认密码！";
    }else if(confirmPassword != password){
     message = "二次密码输入不一致，请重新输入！";
    }else if(patrn.test(password)){
     message = "密码不能全是数字！";
    }else {
     flag = true;
    }
    if(!flag){
     jQuery("#confirmPasswordDiv").removeClass().addClass("ui-form-item has-error");
     jQuery("#confirmPasswordP").html("");
     jQuery("#confirmPasswordP").html("<i class=\"icon-error ui-margin-right10\"> <\/i>"+message);
     //jQuery("#confirm_password").focus();
    }else{
     jQuery("#confirmPasswordDiv").removeClass().addClass("ui-form-item has-success");
     jQuery("#confirmPasswordP").html("");
     jQuery("#confirmPasswordP").html("<i class=\"icon-success ui-margin-right10\"> <\/i>密码正确");
    }
    return flag;
   }

//验证邮箱
   function vailEmail(){
    var email = jQuery("#email").val();
    var flag = false;
    var message = "";
    var myreg = /^([\.a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/; 
    if(email ==''){
     message = "邮箱不能为空！";
    }else if(!myreg.test(email)){
     message = "请输入有效的邮箱地址！";
    }else if(checkEmailIsExist()){
     message = "该邮箱地址已经被注册！";
    }else{
     flag = true;
    }
    if(!flag){
     jQuery("#emailDiv").removeClass().addClass("ui-form-item has-error");
     jQuery("#emailP").html("");
     jQuery("#emailP").html("<i class=\"icon-error ui-margin-right10\"> <\/i>"+message);
     //jQuery("#email").focus();
    }else{
     jQuery("#emailDiv").removeClass().addClass("ui-form-item has-success");
     jQuery("#emailP").html("");
     jQuery("#emailP").html("<i class=\"icon-success ui-margin-right10\"> <\/i>该邮箱可用");
    }
    return flag;
   }

//验证邮箱是否存在
   function checkEmailIsExist(){
    var email = jQuery("#email").val();
    var flag = false;
    jQuery.ajax(
    { url: "checkEmail?t=" + (new Date()).getTime(),
     data:{email:email},
     dataType:"json",
       type:"GET",
       async:false,
       success:function(data) {
       var status = data.status;
       if(status == "1"){
        flag = true;
       }
      }
   });
   return flag;
   }

//验证验证码

 function vailCode(){
    var randCode = jQuery("#randCode").val();
    var flag = false;
    var message = "";
    if(randCode == ''){
     message = "请输入验证码！";
    }else if(!checkCode()){
     message = "验证码不正确！";
    }else{
     flag = true;
    }
    if(!flag){
     jQuery("#randCodeDiv").removeClass().addClass("ui-form-item has-error");
     jQuery("#randCodeP").html("");
     jQuery("#randCodeP").html("<i class=\"icon-error ui-margin-right10\"> <\/i>"+message);
     //jQuery("#randCode").focus();
    }else{
     jQuery("#randCodeDiv").removeClass().addClass("ui-form-item has-success");
     jQuery("#randCodeP").html("");
     jQuery("#randCodeP").html("<i class=\"icon-success ui-margin-right10\"> <\/i>");
    }
    return flag;
   }

//检查随机验证码是否正确
   function checkCode(){
    var randCode = jQuery("#randCode").val();
    var flag = false;
    jQuery.ajax(
    { url: "checkRandCode?t=" + (new Date()).getTime(),
     data:{randCode:randCode},
     dataType:"json",
       type:"GET",
       async:false,
       success:function(data) {
       var status = data.status;
       if(status == "1"){
        flag = true;
       }
      }
   });
   return flag;
   } 

//判断是否选中
 function vailAgree(){
    if(jQuery("#agree").is(":checked")){
     return true;
    }else{
     alert("请确认是否阅读并同意XX协议");
    }
    return false;
   }
function delHtmlTag(str){
 var str=str.replace(/<\/?[^>]*>/gim,"");//去掉所有的html标记
 var result=str.replace(/(^\s+)|(\s+$)/g,"");//去掉前后空格
 return result.replace(/\s/g,"");//去除文章中间空格
}

以上就是实用的javascript表单验证，希望大家喜欢。

常用javascript表单验证汇总

- Author -

lijiao

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
理解Javascript_12_执行模型浅析
Oct 18 Javascript
jQuery获取和设置表单元素的方法
Feb 14 Javascript
JavaScript中的object转换函数toString()与valueOf()介绍
Dec 31 Javascript
jquery搜索框效果实现方法
Jan 16 Javascript
JS和css实现检测移动设备方向的变化并判断横竖屏幕
May 25 Javascript
js智能获取浏览器版本UA信息的方法
Aug 08 Javascript
angular-ui-sortable实现可拖拽排序列表
Dec 28 Javascript
jQuery插件zTree实现更新根节点中第i个节点名称的方法示例
Mar 08 Javascript
基于JavaScript实现新增内容滚动播放效果附完整代码
Aug 24 Javascript
BootStrap表单验证中的非Submit类型按钮点击时触发验证的坑
Sep 05 Javascript
分享Angular http interceptors 拦截器使用(推荐)
Nov 10 Javascript
使用js获取身份证年龄的示例代码
Dec 11 Javascript
jquery验证邮箱格式是否正确实例讲解
Nov 16 #Javascript
跟我学习javascript的call(),apply(),bind()与回调
Nov 16 #Javascript
跟我学习javascript的函数调用和构造函数调用
Nov 16 #Javascript
12种JavaScript常用的MVC框架比较分析
Nov 16 #Javascript
跟我学习javascript的函数和函数表达式
Nov 16 #Javascript
使用JQuery FancyBox插件实现图片展示特效
Nov 16 #Javascript
uploadify多文件上传参数设置技巧
Nov 16 #Javascript
hmac(1) 慢日志(1) hashlib(1) 相对路径(1) mt-swipe(1) openpyxl(1) Mint UI(1) requests(1) 面向对象(3) 相对路径 (1)
You might like
smarty模板引擎中变量及变量修饰器用法实例
2015/01/22 PHP
php pdo oracle中文乱码的快速解决方法
2016/05/16 PHP
[原创]php常用字符串输出方法分析(echo,print,printf及sprintf)
2016/07/09 PHP
PHP微信分享开发详解
2017/01/14 PHP
php7 安装yar 生成docker镜像
2017/05/09 PHP
phpcms实现验证码替换及phpcms实现全站搜索功能教程详解
2017/12/13 PHP
laravel 修改记住我功能的cookie保存时间的方法
2019/10/14 PHP
PHP使用PDO 连接与连接管理操作实例分析
2020/04/21 PHP
20个非常有用的PHP类库 加速php开发
2010/01/15 Javascript
jQuery EasyUI API 中文文档 - EasyLoader 加载器
2011/09/29 Javascript
jquery和ajax的关系详细介绍
2013/11/29 Javascript
FF IE浏览器修改标签透明度的方法
2014/01/27 Javascript
浅谈javascript原型链与继承
2015/07/13 Javascript
JavaScript调用浏览器打印功能实例分析
2015/07/17 Javascript
实例讲解JS中setTimeout()的用法
2016/01/28 Javascript
详解JS几种变量交换方式以及性能分析对比
2016/11/25 Javascript
全选复选框JavaScript编写小结（附代码）
2017/08/16 Javascript
JavaScript基础心法 深浅拷贝(浅拷贝和深拷贝)
2018/03/05 Javascript
JS打印彩色菱形的实例代码
2018/08/15 Javascript
浅谈Vue页面级缓存解决方案feb-alive(上)
2019/04/14 Javascript
微信小程序分包加载代码实现方法详解
2019/09/23 Javascript
二种python发送邮件实例讲解(python发邮件附件可以使用email模块实现)
2013/12/03 Python
python读取json文件并将数据插入到mongodb的方法
2015/03/23 Python
python实现通过代理服务器访问远程url的方法
2015/04/29 Python
浅谈Python中重载isinstance继承关系的问题
2018/05/04 Python
实践Vim配置python开发环境
2018/07/02 Python
python自制包并用pip免提交到pypi仅安装到本机【推荐】
2019/06/03 Python
详解python路径拼接os.path.join()函数的用法
2019/10/09 Python
PyQt5中向单元格添加控件的方法示例
2020/03/24 Python
python3 通过 pybind11 使用Eigen加速代码的步骤详解
2020/12/07 Python
用Python制作音乐海报
2021/01/26 Python
影视动画专业个人的自我评价
2013/12/31 职场文书
学风建设演讲稿
2014/09/12 职场文书
python读取pdf格式文档的实现代码
2021/04/01 Python
python爬取某网站原图作为壁纸
2021/06/02 Python
Python深度学习之实现卷积神经网络
2021/06/05 Python