jquery validate简单实例

来源：互联网发布：网络支付有哪些编辑：程序博客网时间：2024/05/14 18:11

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>测试validata插件</title>
<script type="text/javascript"
src="../res/jquery/jquery-1.6.4.min.js"></script>
<script type="text/javascript"
src="../res/jquery/plugins/jquery.validate.min.js"></script>
<script type="text/javascript"
src="../res/jquery/plugins/jquery.validate.message_cn.js"></script>
<script type="text/javascript">
//添加自定义验证方法
$.validator.addMethod("passwd",
function(value,element,param){
if(value.length<param){
return false;
}else{
return true;
}
},
"密码长度必须大于6");
//阻止默认提交方法，重新提交
$.validator.setDefaults({
submitHandler: function(form) {
alert("表单提交!");
form.submit();
//异步提交
//$(form).ajaxSubmit();
}
});
$().ready(function() {
// validate the comment form when it is submitted
// validate signup form on keyup and submit
$("#testForm").validate({
rules: {
name: {
required: true,
minlength: 2
},
password: {
required: true,
passwd: 6
},
email: {
required: true,
email: true
}
},
messages: {
username: {
required: "请输入用户名",
minlength: "用户名不能小于两位"
},
password: {
required: "请输入密码",
min: "密码长度必须大于6位"
},
email:{
required: "请输入您的邮箱",
email: "邮箱格式不正确"
},
agree: "请确认您已阅读客户须知，并确认登陆本系统"
}
});
});
</script>
</head>
<body>
<form action="" id="testForm" style="text-align: center" >

<h4>用户名:</h4>
<input type="text" id="name" name="name" >
<h4>邮箱:</h4>
<input type="email" id="email" name="email" >
<h4>密码:</h4>
<input type="password" id="password" name="password" >

<h4>性别：</h4>
<input type="radio" name="sex" value="男" required="required">男
<input type="radio" name="sex" value="女" >女
<br>
<input type="radio" name="agree" value="0" required="required">已阅读登陆须知并同意条款
<br>
<input type="submit" value="提交" >
</form>
</body>
</html>

阅读全文

0 0