jquery验证，ok了哈

最新推荐文章于 2024-07-07 23:10:31 发布

WTT

最新推荐文章于 2024-07-07 23:10:31 发布

阅读量607

点赞数 2

文章标签： jquery function stylesheet input xhtml class

本文链接：https://blog.csdn.net/w19911111/article/details/7412795

版权

用jquery验证，我现在始终都认为jquery简单了实现程序，实现一些小的作用是太简单了

验证也是如此：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>注册表单验证</title>
<link rel="stylesheet" type="text/css" media="screen" href="css/screen.css" />

1、jquery验证框架引入
1)导入一个CSS文件
2)导入两个核心的js 1、jquery.js 2、 jquery.validate.js
2、jquery框架有两种使用方法
1)将规则写入到hmtl (控件中)，起始相当于给控件增加class属性，class值=验证规则在ready函数中加入 $("#form1").validate();

    2)通过在js中写验证规则

      写法一：$("#form1").validate({rules:{
        "验证的控件的名称":"验证规则"
       },
     message:{
      "验证的控件的名称":"验证规则"
     }
    });

   写法二：
         $("#form1").validate({rules:{
        "验证的控件的名称":{
        "验证规则":true
     }
      }});

       优点：可以同时编写多个规则

$().ready(function (){

//自行定义的验证方法
jQuery.validator.addMethod("cardValidate",function(value, element, param) {
  //获取用户输入的值，判断是否为空
   if(value==""){
     return false;
   }

  return true;
     }
);

//自行定义的验证方法
jQuery.validator.addMethod("cardLength",function(value, element, param) {
  //获取用户输入的值，长度是否等于15或者是18

   if(value.length!=15&&value.length!=18){
     alert(value.length);
     return false;
   }

     return true;
     }
);

   $("#form1").validate({
    rules:{
    username:{
      required:true,
      minlength:6
    },
    password:{
      required:true,
      minlength:6

    },
    repassword:{
      required:true,
      minlength:6,
      equalTo:"#pass"

    },
    card:{
      cardValidate:true,
      cardLength:15
    }


    },
    messages:{

     username:{
     required:"用户名不能为空！",
     minlength:"用户名长度不能小于6位"
   },
   password:{
     required:"密码不能为空！",
     minlength:"用户名长度不能小于6位"
   },
   repassword:{
     required:"密码不能为空！",
     minlength:"用户名长度不能小于6位",
     equalTo:"密码和重复密码内容不一致"

   },
   card:{
     cardValidate:"身份证号不能为空！",
     cardLength:"身份证号长度不够"
   }


      }


});

});

</script>
</head>

用户名：<input type="text" name="username" id="uname" /><br>错误信息<br><br>
<span id="span"></span>

密码：<input type="password" name="password" id="pass" /><br>

重复密码：<input type="password" name="repassword" id="repass" /><br>

身份证号：<input type="text" name="card" id="card" /><br>
<input type="submit" value="提交" />

</form>
</body>
</html>

WTT

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery验证，ok了哈

用jquery验证，我现在始终都认为jquery简单了实现程序，实现一些小的作用是太简单了验证也是如此：http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/1999/xhtml">注册表单验证$.validator.setDefaults({ submi
复制链接

扫一扫