jquery.validate入门demo jquery.validate入门demo

jquery.validate入门demo

工作中经常需要用到js验证，jquery有一款比较不错的表单验证框架（jquery.validate.js）

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<script type="text/javascript" src="lib/jquery.js"></script>
<script type="text/javascript" src="./jquery.validate.js"></script>
</head>
<body>
<script type="text/javascript">
<!--
$(function(){
$.validator.addMethod("isMobile",function(value, element, params){
return this.optional(element)||value=='13420642222';
},"请填入正确的手机号码！");
var v = $("#form1").validate({
rules:{
text1:{required:true},
text2:{required:true,email:true},
text4:{required:true,digits:true},
text5:{required:true,date:true},
text6:{required:true,isMobile:true},
text3:{required:true,number:true}
},messages:{
text1:{required:"请输入姓名"},
text2:{required:"email不能为空！",email:"请输入正确的email"},
text4:{required:"text4不能为空！",digits:"请输入正确整数"},
text5:{required:"text5不能为空！",date:"请输入正确日期"},
text3:{required:"text3不能为空！",number:"必须为数字"}
},debug:true,
onfocusout:false
});
$("#ss").click(function(){
var check = v.form();
/* v.errorList.push({message:"dasd",element:null});
var msg = "";
$.each( v.errorList, function(i,v){
msg += ((i+1)+"、"+v.message+"\r\n");
});
if(msg!="") alert(msg);*/
});
});
//-->
</script>
</body>
<form method="post" action="" id="form1">
<input type="text" name="text1"><br/>
<input type="text" name="text2"><br/>
<input type="text" name="text3"><br/>
<input type="text" name="text4"><br/>
<input type="text" name="text5"><br/>
<input type="text" name="text6"><br/>
<input type="text" name="text7"><br/>
<input type="text" name="text8"><br/>
<input type="button" id="ss" value="提交">
</form>
</html>

工作中经常需要用到js验证，jquery有一款比较不错的表单验证框架（jquery.validate.js）

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<script type="text/javascript" src="lib/jquery.js"></script>
<script type="text/javascript" src="./jquery.validate.js"></script>
</head>
<body>
<script type="text/javascript">
<!--
$(function(){
$.validator.addMethod("isMobile",function(value, element, params){
return this.optional(element)||value=='13420642222';
},"请填入正确的手机号码！");
var v = $("#form1").validate({
rules:{
text1:{required:true},
text2:{required:true,email:true},
text4:{required:true,digits:true},
text5:{required:true,date:true},
text6:{required:true,isMobile:true},
text3:{required:true,number:true}
},messages:{
text1:{required:"请输入姓名"},
text2:{required:"email不能为空！",email:"请输入正确的email"},
text4:{required:"text4不能为空！",digits:"请输入正确整数"},
text5:{required:"text5不能为空！",date:"请输入正确日期"},
text3:{required:"text3不能为空！",number:"必须为数字"}
},debug:true,
onfocusout:false
});
$("#ss").click(function(){
var check = v.form();
/* v.errorList.push({message:"dasd",element:null});
var msg = "";
$.each( v.errorList, function(i,v){
msg += ((i+1)+"、"+v.message+"\r\n");
});
if(msg!="") alert(msg);*/
});
});
//-->
</script>
</body>
<form method="post" action="" id="form1">
<input type="text" name="text1"><br/>
<input type="text" name="text2"><br/>
<input type="text" name="text3"><br/>
<input type="text" name="text4"><br/>
<input type="text" name="text5"><br/>
<input type="text" name="text6"><br/>
<input type="text" name="text7"><br/>
<input type="text" name="text8"><br/>
<input type="button" id="ss" value="提交">
</form>
</html>

jquery.validate入门demo jquery.validate入门demo

jquery.validate入门demo

猜你喜欢