jQuery Validate demo

最新推荐文章于 2018-11-05 15:22:22 发布

yakunyang（2016）

最新推荐文章于 2018-11-05 15:22:22 发布

阅读量261

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/qq_40774743/article/details/79618008

本文介绍了一个使用jQuery Validate插件实现的表单验证案例，包括自定义验证规则及错误消息显示。演示了如何设置必填项及特定格式要求。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>杨亚坤表单验证</title>
<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/lib/jquery.js"></script>
<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script>
<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/localization/messages_zh.js"></script>
<style>
.error{
color:red;
}
.cmxform{
margin:20px;
}
</style>
</head>
<body>
<h1>jq官方验证插件</h1>
<h3>为项目第二阶段开发完善项目准备(time：2108/3/20)</h3>
<h5>详细的参数见官方文档如下网址 </h5>
<p>http://www.runoob.com/jquery/jquery-plugin-validate.html</p>
<p></p>
<form class="cmxform" id="commentForm" method="get" action="">
<fieldset>
<legend>我的范围内是表单！！</legend>
<p>
<label for="cname">Name (必需, 最小6个字母)</label>
<input id="cname" name="name1" type="text">
</p>
<p>
<label for="cemail">E-Mail (必需)</label>
<input id="cemail" name="email">
</p>
</fieldset>
</form>
<div class="tijiao" onclick="fun(this)">
<input type="submit" name="">
提交事件 hi！点击我提交表单进行数据持久化
</div>

<script>
//下面的函数是我自己定义的规则；可以扩展进jq -validate插件里面；
jQuery.validator.addMethod("yykemal", function(value, element) {
var reg = /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
return reg.test(value);
}, "");

// 插件通过 ID旗下表单name 来进行规则匹配和提示语匹配例如，name1 email 分别为上面html中的第一个第二个 text
// 不详细之处可参见官方网址（DOM上展示）
$("#commentForm").validate({
rules: {
name1: {
required: true,
minlength: 6
},
email: {
required: true,
yykemal: true
}
},
messages: {
name1: {
required: "必填必填必填不！不填也得填",
minlength: "你必须是6个字以上"
},
email: {
required: "必填呀哥哥邮箱",
yykemal:"请填写正确的邮箱格式-杨亚坤（自定义验证规则）"
},
}
});
function fun(that){
if (!$("form").valid()) {
return ;
}
alert("可以进行数据持久化，后台传输了");

}

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