您的位置：首页 > Web前端 > JQuery

使用jQuery的validation插件来完成表单的验证

2015-11-15 12:51 751 查看

**使用jQuery的validation插件来完成表单的验证**

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>validation 练习</title>
<link rel="stylesheet" type="text/css" href="../reset.css">
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="../jquery-1.9.1.js"></script>
<script type="text/javascript" src="jquery.validate.js"></script>
<script type="text/javascript" src="jquery.validate.messages_cn.js"></script>
<script type="text/javascript" src="index.js"></script>
<style type="text/css">
#content{width:800px;margin:30px auto;}
#content h1{text-align: center;line-height: 50px;font-size: 20px;}
#customValidation p{height: 50px;overflow: hidden;}
#customValidation p label{text-align: left;width:100px;float: left;line-height: 40px;font-size: 15px;color:#707070;}
#customValidation p input{float: left;width: 300px;height: 18px;line-height: 18px;border: 1px solid #ccc;padding: 10px 0;margin-right: 5px;font-size: 15px;text-indent: 5px;}
#customValidation p span{float: left;line-height: 40px;}
#customValidation p label.error{float: right;width: 280px;text-align: left;}
#customValidation p input.submit{height: 30px;width: 60px;line-height: 30px;padding: 0;text-align: center;color: #777;cursor: pointer;margin-left: 100px;}
#customValidation p em{height: 30px;line-height: 30px;margin-left: 5px;}
#customValidation p em.error{background: url(zhuce2.gif) 0 0 no-repeat;padding-left:18px;padding-bottom: 2px;}
#customValidation p em.success{background: url(zhuce3.gif) 0 0 no-repeat;padding-left:18px;padding-bottom: 2px;}
</style>
</head>
<body>
<div id="content">
<h1>表单验证</h1>

<form id="customValidation" action="">
<p>
<label for="cuser">用户名：</label>
<input type="text" id="cuser" name="username"  >
<span>*</span>
</p>
<p>
<label for="cpass">密码：</label>
<input type="password" id="cpass" name="password" >
<span>*</span>
</p>
<p>
<label for="cemail">电子邮件：</label>
<input id="cemail" name="email" >
<span>*</span>
</p>
<p>
<label for="curl">网址：</label>
<input id="curl" name="url" >
</p>
<p>
<label for="cvalcode">验证码：</label>
<input id="cvalcode" name="valcode" >=7+9
</p>
<p>
<input type="submit" class="submit" value="提交">
</p>
</form>
</div>
<script type="text/javascript">
$(function(){
$("#customValidation").validate({
rules:{
username:{
required:true,
minlength:2
},
password:{
required:true,
minlength:6
},
email:{
required:true,
email:true
},
url:"url",
valcode:{
formula:"7+9"
}
},
messages:{
username:{
required:"请输入用户名",
minlength:"至少输入两个字符",
},
password:{
required:"请输入密码",
minlength:"至少输入六个字符",
},
email:{
required:"请输入邮箱",
email:"请输入正确的邮箱地址",
},
url:{
url:"请输入正确的网址",
}
},
errorElement:"em",
success:function(label){
label.text(" ").addClass("success");
}

});
})
</script>
<script type="text/javascript">
$(function(){
$.validator.addMethod(
"formula",
function(value,element,param){
return value == eval(param);
},
"请正确输入数学公式计算后的结果"
)
})

</script>
</body>
</html>

源码下载地址：http://pan.baidu.com/s/1eQfQPfs

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航