jQuery表单验证
来源：互联网 发布：2018优化重组数学答案 编辑：程序博客网 时间：2024/06/05 02:19
<!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><!--引入jQuery类库文件--><script language="javascript" type="text/javascript" src="../js/jquery-1.7.1.min.js"></script><link rel="stylesheet" type="text/css" media="screen" href=".././include/jquery-validation-1.9.0/demo/css/screen.css" /><script src=".././include/jquery-validation-1.9.0/lib/jquery.js" type="text/javascript"></script><script src=".././include/jquery-validation-1.9.0/lib/jquery.metadata.js" type="text/javascript"></script><script src=".././include/jquery-validation-1.9.0/jquery.validate.js" type="text/javascript"></script><!--CSS--><style type="text/css">.cmxform fieldset p.error label { color: red; }div.container {background-color: #eee;border: 1px solid red;margin: 5px;padding: 5px;}div.container ol li {list-style-type: disc;margin-left: 20px;} div.container { display: none; } .container label.error {display: inline;}form.cmxform { width: 30em; }form.cmxform label.error {display: block;margin-left: 1em;width: auto;}</style></head><script type="text/javascript" language="JavaScript">$.validator.setDefaults({submitHandler:function(){//alert("取消按钮");}});$(function(){/* * form1的验证规则 * * */$("#form1").validate({rules:{user:{required:true,minlength:6},password:{required:true,minlength:6}},messages:{user:{required:"用户名不能为空",minlength:"用户名长度不能小于6位!"},password:{required:"密码不能为空",minlength:"密码长度不能小于6位"}}});/* * * * form2 */var container = $('div.container');var validator=$("#form2").validate({errorContainer:container,errorLabelContainer:$("ol",container),wrapper:'li',meta:"validate"});$(".cancel").click(function(){validator.resetForm();});});</script><body><div id="main"><form method="get" class="cmxform" id="form1" action=""><fieldset><legend>用户登录</legend><p><label>用户名</label><input name="user" title="Please enter your username (at least 3 characters)" class="{required:true,minlength:3}" /></p><p><label>密码</label><input type="password" maxlength="12" name="password" title="Please enter your password, between 5 and 12 characters" class="{required:true,minlength:5}" /></p><div class="error"></div><p><input class="submit" type="submit" value="Login"/></p></fieldset></form><!-- our error container --><div class="container"><h4>你有严重的错误表单提交,请见下文了解详情</h4><ol><li><label for="email" class="error">请输入你的邮件地址 </label></li><li><label for="phone" class="error">请输入您的电话号码</label></li><li><label for="address" class="error">请输入您的地址</label></li><li><label for="avatar" class="error">请选择一幅图像</label></li><li><label for="cv" class="error">请选择一个文件</label></li></ol></div><form class="cmxform" id="form2" method="get" action=""><fieldset><legend>注册</legend><p><label for="email">Email：</label><input id="email" name="email" class="{validate:{required:true,email:true}}" /></p><p><label for="agree">请选择你的学历</label><select id="color" name="color" title="请选择你的学历" class="{validate:{required:true}}"><option></option><option>本科</option><option>研究生</option><option>博士</option><option>大专</option><option>其他</option></select></p><p><label for="phone">联系方式：</label><input id="phone" name="phone" class="some styles {validate:{required:true,number:true, rangelength:[2,8]}}" /></p><p><label for="address">地址：</label><input id="address" name="address" class="some other styles {validate:{required:true,minlength:3}}" /></p><p><label for="avatar">上传头像：</label><input type="file" id="avatar" name="avatar" class="{validate:{required:true,accept:true}}" /></p><p><label for="agree">同意XXXXX协议</label><input type="checkbox" class="checkbox" id="agree" title="Please agree to our policy!" name="agree" class="{validate:{required:true}}" /></p><p><label for="cv">简历：</label><input type="file" id="cv" name="cv" class="{validate:{required:true,accept:'docx?|txt|pdf'}}" /></p><p><input class="submit" type="submit" value="Submit"/><input class="cancel" type="submit" value="Cancel"/></p></fieldset></form><div class="container"><h4>注册错误 ，重新填写!!</h4></div></div></body></html>
