以下是关于jquery validate添加自定义验证规则的完整攻略。
什么是jquery validate?
jQuery validate是一个基于jQuery的表单验证插件,它可以对表单中的各类数据进行校验,从而帮助我们减少了客户端数据校验的代码量,提高了开发效率。
如何添加自定义验证规则?
jquery validate插件提供了丰富的内置验证规则,但如果我们的业务需求中还有一些特定的数据需要进行验证,那么我们可以自定义验证规则。下面是通过jquery validate添加自定义验证规则的步骤:
- 定义验证规则
我们首先需要定义自己所需要的验证规则,参考如下代码:
// 验证邮箱格式
$.validator.addMethod("email",function(value,element){
var mailReg = /^\w+$/;
return this.optional(element) || mailReg.test(value);
},"请输入正确的邮箱格式");
// 邮政编码验证规则
$.validator.addMethod("zipcode",function(value,element){
var zipReg = /^[0-9]{6}$/;
return this.optional(element) || (zipReg.test(value));
},"请正确填写邮政编码");
在上述代码中,我们定义了两种规则:email和zipcode。其中,email用于验证用户输入的邮箱格式是否正确,而zipcode用于验证邮政编码是否正确。
- 调用自定义规则
定义完规则后,我们还需要在实际应用中调用我们定义的规则,以使其生效。在调用时需要使用$.validator.setDefaults方法为这些规则设置默认的(通用的)选项。如下所示:
$.validator.setDefaults({
// 当表单验证失败时,显示错误信息
errorPlacement: function(error, element) {
error.appendTo(element.parent());
}
});
$().ready(function(){
// 表单验证
$("#myform").validate({
// 验证规则
rules: {
// 对id名称的元素进行email验证,其对应的规则为email,并提示“请输入正确的邮箱格式”
email: {
required: true,
email: true
},
// 对id名称的元素进行邮政编码验证,其对应的规则为zipcode,并提示“请正确填写邮政编码”
zipcode: {
required: true,
zipcode: true
}
}
});
});
在上述代码中,我们首先使用$.validator.setDefaults方法为我们定义的规则设置了一个通用选项,在本例中,我们在errorPlacement选项中规定了失败时错误信息的显示方式。接下来,我们定义了一个表单myform,并为其设置了验证规则。
定义了验证规则之后,我们需要为需要验证的表单元素增加规则,并指定对应的自定义验证规则,并在其中加入提示信息。例如,我们为文本框email指定了需要进行email验证和必须输入两个规则,同时,也为它定义了一条验证未通过时的提示信息。
示例1
下面是一个简单示例,演示了如何使用jquery validate进行email验证。具体代码如下:
<!doctype html>
<html>
<head>
<title>实例1:使用jquery validate进行email验证</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script>
<script type="text/javascript">
$(function(){
// 添加自定义验证规则
$.validator.addMethod("email", function(value, element){
var emailReg = /^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/;
return this.optional(element) || emailReg.test(value);
},"请正确填写email格式");
// 加载验证规则
$("#myform").validate({
rules: {
email: {
email: true,
required: true
}
}
});
});
</script>
<style>
#myform label.error {
color:red;
}
</style>
</head>
<body>
<h2>实例1:使用jquery validate进行email验证</h2>
<form action="" method="post" id="myform">
<p>
<label>邮箱:</label>
<input type="text" id="email" name="email">
</p>
<p>
<button type="submit">提交</button>
</p>
</form>
</body>
</html>
在上述示例中,我们在脚本中添加了一个名为email的自定义验证规则,并在提交按钮被按下时加载了该规则,并指定并对文本框email进行了email验证。
示例2
下面是一个简单示例,演示了如何使用jquery validate进行email验证和邮政编码验证。具体代码如下:
<!doctype html>
<html>
<head>
<title>实例2:使用jquery validate进行email和邮政编码验证</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script>
<script type="text/javascript">
$(function(){
// 自定义验证规则
$.validator.addMethod("email", function(value, element){
var emailReg =/^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/;
return this.optional(element) || emailReg.test(value);
},"请正确填写email格式");
$.validator.addMethod("zipcode", function(value, element){
var zipReg = /^[0-9]{6}$/;
return this.optional(element) || zipReg.test(value);
},"请正确填写邮政编码");
// 加载验证规则
$("#myform").validate({
rules: {
email: {
required: true,
email: true
},
code: {
required: true,
zipcode: true
}
}
});
});
</script>
<style>
#myform label.error {
color:red;
}
</style>
</head>
<body>
<h2>实例2:使用jquery validate进行email和邮政编码验证</h2>
<form action="" method="post" id="myform">
<p>
<label>邮箱:</label>
<input type="text" id="email" name="email">
</p>
<p>
<label>邮政编码:</label>
<input type="text" id="code" name="code">
</p>
<p>
<button type="submit">提交</button>
</p>
</form>
</body>
</html>
在上述示例中,我们在脚本中添加了一个名为email的自定义验证规则和一个名为zipcode的自定义验证规则,并在提交按钮被按下时加载了这两条规则,并分别对文本框email和code进行了email验证和邮政编码验证。
本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:jquery validate添加自定义验证规则(验证邮箱 邮政编码) - Python技术站