常用javascript表单验证汇总

前端技术 2023/09/01 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表单验证，希望大家喜欢。

本文地址：https://www.stayed.cn/item/1435

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请联系我

微信
QQ好友
QQ空间
腾讯微博
新浪微博
人人网

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案

2024-02(2)
2023-06(1)
2023-05(1)
2023-04(14)
2023-03(3)
2023-01(6)
2022-12(5)
2022-11(5)
2022-07(2)
2022-06(4)
2022-05(3)
2022-03(1)
2021-12(6)
2021-11(1)
2021-10(3)
2021-09(5)
2021-07(5)
2021-02(2)
2021-01(7)
2020-12(18)
2020-11(14)
2020-10(12)
2020-09(10)
2020-08(22)
2020-07(2)
2020-06(1)
2020-04(5)
2020-03(9)
2020-02(7)
2020-01(9)
2019-12(8)
2019-11(10)
2019-10(11)
2019-09(17)
2019-08(16)
2019-07(6)
2019-06(3)
2019-04(1)
2019-03(8)
2019-02(5)
2019-01(1)
2018-11(2)
2018-10(3)
2018-09(1)
2018-08(3)
2018-07(3)
2018-06(7)
2018-04(4)
2018-03(5)
2018-02(4)
2018-01(22)
2017-12(3)
2017-11(5)
2017-10(15)
2017-09(26)
2017-08(1)
2017-07(3)