jQuery.validator.js和jquery.metadata.js使用详解

来源：互联网发布：dojo 对象数组转json 编辑：程序博客网时间：2024/06/05 18:37

jQuery.validator.js使用demo

<!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>jquery validate表单验证插件制作注册表单验证提交</title>
<meta name="description"content="jquery validate表单验证插件制作用户注册页面表单提交验证，用户名、手机、密码、邮箱等表单验证。通过这款validate表单验证插件能制作多种表单提交验证。" />
<script language="javascript"type="text/javascript"src="./jquery.js"></script>
<script language="javascript"type="text/javascript"src="./jquery.validate.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#signupForm").validate({
rules: {
"firstname":{
required: true,
rangelength: [4, 20]
},
"email":{
required: true,
email:true
},
"password":{
required: true,
rangelength: [4, 20]
},
"confirm_password":{
required: true,
equalTo: "#password"
}
},
messages: {
"firstname":{
required: "请输入用户名",
rangelength: "请输入4-20位字母开头的字母或数字和下划线"
},
"email":{
required:"请输入邮箱地址",
email:"请输入正确的email地址"
},
"password":{
required:"请输入密码",
rangelength: "请输入4-20位字母开头的字母或数字和下划线"
},
"confirm_password":{
required:"请再次输入密码",
equalTo:"两次输入密码不一致",
}
}
});
});
</script>
</head>
<body>
<form id="signupForm"method="post"action="">
<table width="100%">
<tr>
<td class="tdcon">用户名:</td>
<td>
<input type='text'name="firstname"id="firstname"value="" />
<div class="tipinfo"></div>
</td>
</tr>
<tr>
<td class="tdcon">邮箱:</td>
<td>
<input type='text'name="email"id="email" value="" />
<div class="tipinfo"></div>
</td>
</tr>
<tr>
<td class="tdcon">密码:</td>
<td>
<input type='text'name="password"id="password"value="" />
<div class="tipinfo"></div>
</td>
</tr>
<tr>
<td class="tdcon">确认密码:</td>
<td>
<input type='text'name="confirm_password"id="confirm_password"value="" />
<div class="tipinfo"></div>
</td>
</tr>
<tr>
<td></td>
<td><buttonname="Submit"type="submit">同意以下服务条款并注册</button></td>
</tr>
</table>
</form>
</body>
</html>

jquery.metadata.js

<!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>jquery.metadata.js</title>
<script language="javascript"type="text/javascript"src="./jquery.js"></script>
<script language="javascript"type="text/javascript"src="./jquery.validate.js"></script>
<script src="./jquery.metadata.js"type="text/javascript"></script>
<SCRIPT type="text/javascript">
$(document).ready(function () {
jQuery.validator.addMethod("phone",function (val,element) {
var tel = /^(\d{3,4}-?)?\d{7,9}$/g;
return this.optional(element)|| (tel.test(val));
}, "请正确填写您的电话号码");

var validator = $('#jqueryForm').validate();
</SCRIPT>

</head>

<body>

<form id="jqueryForm"name="jqueryForm"method="post"action="">

<table cellspacing="0"cellpadding="0">
<tr>
<td>用户名</td>
<td><inputtype="text"name="username"class="{required:true,minlength:6,maxlength:10}" /></td>
<td></td>
</tr>
<tr>
<td>密码</td>
<td><inputtype="password"name="password"id="password"class="{required:true,minlength:6,maxlength:10}" /></td>
<td></td>
</tr>
<tr>
<td>确认密码</td>
<td><inputtype="password"name="repass"class="{required:true,minlength:6,maxlength:10,equalTo:'#password'}" /></td>
<td></td>
</tr>
<tr>
<td>手机号码</td>
<td><inputtype="text"name="phone"id="phone" class="{required:true,phone:true}" /></td>
<td></td>
</tr>
<tr>
<td>邮箱</td>
<td><inputtype="text"name="email"class="{required:true,minlength:6,maxlength:50,email:true}" /></td>
<td></td>
</tr>
<tr>
<td><inputtype="submit"id="btn" value="提交" /> <inputtype="reset"value="重置" /></td>
</tr>
</table>
</form>
</body>

</html>

这里把验证规则都写在结构的 class 属性里，也可以设置写在其他属性里，使用这个方法：

$.metadata.setType('attr','validate');

加入这个代码之后，就可以写在validate属性中了，如下：

<tr>
<td>手机号码</td>
<td><inputtype="text"name="phone"id="phone" validate="{required:true,phone:true}" /></td>
<td></td>
</tr>

写的不是很详细，其中 jquery.js jquery.validate.js jquery.meta.js 这三个类库自己去网上找资源下载，也可以去我的github下载。

github地址：

https://github.com/MrITzhongzi/class-lib/tree/master

阅读全文

1 0