- 各种数据验证
- 使用jquery-validation 验证插件完成对表单的各种验证
- 定义页面内容
<html>
<head>
<meta charset="UTF-8"/>
<title>jQuery验证框架</title>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.validate-1.13.1.js"></script>
<script type="text/javascript" src="js/additional-methods.js"></script>
<script type="text/javascript" src="js/jquery.metadata.js"></script>
<script type="text/javascript" src="js/messages_zh.js"></script>
<script type="text/javascript" src="js/member/member_add_05.js"></script>
<link rel="stylesheet" href="css/style.css" type="text/css">
</head>
<body>
<form action="welcome.html" id="myform">
<table border="1">
<tr>
<td>用户名</td>
<td><input type="text" name="member.mid" id="member.mid"></td>
<td><span id="member.midMsg"></span></td>
</tr>
<tr>
<td>年龄</td>
<td><input type="text" name="age" id="age"></td>
<td><span id="ageMsg"></span></td>
</tr>
<tr>
<td>生日</td>
<td><input type="text" name="member.birthday" id="member.birthday"></td>
<td><span id="member.birthdayMsg"></span></td>
</tr>
<tr>
<td>性别</td>
<td>
<input type="radio" name="member.sex" id="member.sex" value="男">男
<input type="radio" name="member.sex" id="member.sex" value="女">女
</td>
<td><span id="member.sexMsg"></span></td>
</tr>
<tr>
<td>兴趣</td>
<td>
<input type="checkbox" name="member.interest" id="member.interest" value="游泳">游泳
<input type="checkbox" name="member.interest" id="member.interest" value="篮球">女
<input type="checkbox" name="member.interest" id="member.interest" value="打人">武艺
</td>
<td><span id="member.interestMsg"></span></td>
</tr>
<tr>
<td>个人主业</td>
<td>
<input type="text" name="member-hostpage" id="member-hostpage" >
</td>
<td><span id="member-hostpageMsg"></span></td>
</tr>
<tr>
<td>登录密码</td>
<td>
<input type="text" name="member-password" id="member-password" >
</td>
<td><span id="member-passwordMsg"></span></td>
</tr>
<tr>
<td>确认密码</td>
<td>
<input type="text" name="conf" id="conf" >
</td>
<td><span id="confMsg"></span></td>
</tr>
<tr>
<td colspan="3">
<input type="submit" value="注册">
<input type="reset" value="重置">
</td>
</tr>
</table>
</form>
</body>
</html>
$(function(){
$("#myform").validate({
debug:true,
errorPlacement:function(error,element){
var spanName = element.attr("id")+"Msg";
if(spanName.indexOf(".") != -1){
spanName = spanName.replace(".","\\.")
}
$("#"+spanName).append(error);
},
submitHandler:function(form){
form.submit();
},
highlight:function(element,errorClass){
$(element).attr("class","failure");
},
unhighlight:function(element){
$(element).attr("class","success");
},
rules: {
"member.mid": {
required:true,
rangelength:[5,15],
email:true
},
"age":{
required:true,
number:true
},
"member.birthday":{
dateISO:true
},
"member.sex":{
required:true
},
"member.interest":{
required:true
},
"member-hostpage":{
required:true,
url:true
},
"member-password":{
required:true
},
"conf":{
required:true,
equalTo:"#member-password"
}
}
});
});
