<!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 src="Scripts/jquery-1.7.1.js"></script>
<script src="Scripts/jquery.validate.js"></script>
<!--<script src="Scripts/jquery.metadata.2.1.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>
<button name="Submit" type="submit">同意以下服务条款并注册</button></td>
</tr>
</table>
</form>
</body>
</html>
上面的代码不能使用jquery.metadata.js,
如果用的话就可以在class属性里面设置设置规则 如:
class="{required:true,minlength:5,messages:{required:'请输入内容'}}"
class="{required:true,minlength:5,equalTo:'#password'}"
使用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 src="Scripts/jquery-1.7.1.js"></script>
<script src="Scripts/jquery.validate.js"></script>
<script src="Scripts/jquery.metadata.2.1.js"></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));
}, "请正确填写您的电话号码");
validator = $('#jqueryForm').validate(/*{
focusInvalid: true,
onkeyup: false,
errorPlacement: function(error, element) {
if ( element.is(":radio") )
error.appendTo( element.parent().next().next() );
else if ( element.is(":checkbox") )
error.appendTo ( element.next() );
else
error.appendTo( element.parent().next() );
},
highlight: function(element, errorClass) { //针对验证的表单设置高亮
$(element).addClass(errorClass);
},
success: function(label) {
label.html(" ").addClass("checked");
},
rules:{
phone:{
required:true,
phone:true
}
}
}*/);
/*$("#btn").click(function(){
validator.resetForm();
}); */
});
</script>
</head>
<body>
<form id="jqueryForm" name="jqueryForm" method="post" action="">
<table cellspacing="0" cellpadding="0">
<tr>
<td>用户名</td>
<td>
<input type="text" name="username" class="{required:true,minlength:6,maxlength:10}" /></td>
<td></td>
</tr>
<tr>
<td>密码</td>
<td>
<input type="password" name="password" id="password" class="{required:true,minlength:6,maxlength:10}" /></td>
<td></td>
</tr>
<tr>
<td>确认密码</td>
<td>
<input type="password" name="repass" class="{required:true,minlength:6,maxlength:10,equalTo:'#password'}" /></td>
<td></td>
</tr>
<tr>
<td>手机号码</td>
<td>
<input type="text" name="phone" id="phone" class="{required:true,phone:true}" /></td>
<td></td>
</tr>
<tr>
<td>邮箱</td>
<td>
<input type="text" name="email" class="{required:true,minlength:6,maxlength:50,email:true}" /></td>
<td></td>
</tr>
<tr>
<td>
<input type="submit" id="btn" value="提交" />
<input type="reset" value="重置" /></td>
</tr>
</table>
</form>
</body>
</html>