码迷,mamicode.com
首页 > Web开发 > 详细

jquery validate的使用

时间:2015-09-28 23:56:28      阅读:266      评论:0      收藏:0      [点我收藏+]

标签:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="../Common/css/user_login_register.css" />
<script src="../Common/js/jquery-validation/lib/jquery.js"></script>
<script src="../Common/js/jquery-validation/dist/jquery.validate.js"></script>
<script src="../Common/js/form_check.js"></script>

/*首先解释一下这里,第一个的css是当前的样式,里面最主要的是有个错误信息的样式的设置.error{}*/

register.css

label.error{
color:red;
background-color:yellow;
}

//接着两个是必须添加的,jquery.validate.js依据jquery.js实现

//最后一个是js文件。里面可以自定义验证规整和验证方法.

</head>
<body>
<div class="dbody">
<div class="content register">
<form action="gamehost.html" method="post" id="register">//这里的表单验证id,
<fieldset class="filed_register">
<legend>User Login</legend>
<ul>
<li>
<label>账号:</label><input type="text" name="user" id="user" maxlength="15"/>//这里的user  id
</li>
<li>
<label>密码:</label><input type="password" name="password" id="password" maxlength="15" />//这里password   id
</li>
<li>
<label>确认密码:</label><input type="password" name="topassword" id="topassword" maxlength="15" />//这里的topassword  id对应着自定义的一种验证规则,
</li>
<li>
<label>邮箱:</label><input type="email" name="user_email" id="user_email" maxlength="15" />
</li>
</ul>
</fieldset>
<div class="botdiv">
<input type="submit" name="register" id="reigster" value="注册" />
</div>
</form>
</div>
</div>

</body>
</html>

//这里是js文件的内容

$(function(){

//1.通过validate对表单进行验证

var $form_result = $("#register").validate({
rules:{//2.自定义验证规则
user:{//这里是对应的id,对应一种验证规则
required:true,
rangelength:[6,15],
user_consist:true,
},
password:{
required:true,
rangelength:[6,15],
password_consist:true,//这个是自定义的验证方法,方法名也是自定义的。
},
topassword:{
required:true,
rangelength:[6,20],
equalTo:"#password",//这里的验证是否相同的要写好。
password_consist:true,
},
user_email:{
required:true,
email:true,
}
//邮箱不用自定义验证
},
messages:{
user:{//跟上面的对应,这个是自定义错误信息
required:"请输入用户名",
rangelength:"请输入6-15个字符,用户名右数字或字母组成,且首字符为英文",
user_consist:"请输入6-15个字符,用户名由数字或字母组成,且首字符为英文",
},
password:{
required:"请输入密码",
rangelength:"请输入6-20个字符,密码由数字或字母组成",
user_consist:"请输入6-20个字符,密码由数字或字母组成",
},
topassword:{
required:"请输入密码",
rangelength:"请输入6-20个字符,密码由数字或字母组成",
user_consist:"请输入6-20个字符,密码由数字或字母组成",
equalTo:"两次密码不一致,请重新输入",
},
user_email:{
required:"用户邮箱不为空",
email:"email格式不正确",
}

}
})
});

//这个是自定义验证方法。
jQuery.validator.addMethod("user_consist", function(value, element) {
var reg =/^[a-zA-Z][a-zA-Z0-9]{5,14}$/;//有字母数字组成,并且首字符为字母,长度为6-15位
return value.match(reg)==null?false:true;
}, "这是用户名组成consiste默认的提示错误信息");

jQuery.validator.addMethod("password_consist", function(value, element) {
var reg =/^[a-zA-Z0-9]{6,20}$/;//有字母数字组成,并且首字符为字母,长度为6-20
return value.match(reg)==null?false:true;
}, "这是密码组成consiste默认的提示错误信息");

jQuery.validator.addMethod("password_consist", function(value, element) {
var reg =/^[a-zA-Z0-9_]{6,15}$/;
return value.match(reg)==null?false:true;
}, "这是密码组成consiste默认的提示错误信息");

 


//下面的自定义的错误信息提示会覆盖上面的错误信息提示,在接着覆盖父类中的默认英文错误信息提示

//自定义的验证规则,和验证方法,在程序运行的时候会自动验证。通过规定的验证规则rules去查找对应的验证方法method,然后在会自动生成一个label错误提示在其后面,可参考模板,

在使用的时候可能会遇到一些小问题,大家仔细钻研,如果有人发同类文章更加详细的,可给我连接,我也去足额西

 

jquery validate的使用

标签:

原文地址:http://www.cnblogs.com/php-log/p/4845247.html

(0)
(0)
   
举报
评论 一句话评论(0
0条  
登录后才能评论!
© 2014 mamicode.com 版权所有 京ICP备13008772号-2
迷上了代码!