java项目框架之jquery-validate 表单校验
2017-02-07 23:03
411 查看
java项目框架之jquery-validate 表单校验
使用技术：jquery-validate
验证规则与书写方法和样式无关，可以自行定义
框架搭建图：
运行结果图：
实战步骤
步骤1：导入jqeury 库文件
jquery-1.10.2.min.js
jquery.validate.min.js
步骤2：自定义封装校验规则
jquery-validate-method.js
步骤3：编写表单
index.jsp （表单验证页面）
index2.jsp （表单校验成功提交跳转界面）
相关代码：
jquery-validate-method.js
/*****************************************************************
jQuery Validate扩展验证方法
*****************************************************************/
$(function(){
//下面是一些常用的验证规则扩展
$.validator.setDefaults({
errorElement:'span'
});
//配置通用的默认提示语
$.extend($.validator.messages, {
required: '必填',
equalTo: "请再次输入相同的值"
});
jQuery.validator.addMethod("mail", function (value, element) {
var mail = /^[a-z0-9._%-]+@([a-z0-9-]+\.)+[a-z]{2,4}$/;
return this.optional(element) || (mail.test(value));
}, "邮箱格式不对");
//电话验证规则
jQuery.validator.addMethod("phone", function (value, element) {
var phone = /^0\d{2,3}-\d{7,8}$/;
return this.optional(element) || (phone.test(value));
}, "电话格式如：0371-68787027");
//区号验证规则
jQuery.validator.addMethod("ac", function (value, element) {
var ac = /^0\d{2,3}$/;
return this.optional(element) || (ac.test(value));
}, "区号如：010或0371");
//无区号电话验证规则
jQuery.validator.addMethod("noactel", function (value, element) {
var noactel = /^\d{7,8}$/;
return this.optional(element) || (noactel.test(value));
}, "电话格式如：68787027");
//手机验证规则
jQuery.validator.addMethod("mobile", function (value, element) {
var mobile = /^1[3|4|5|7|8]\d{9}$/;
return this.optional(element) || (mobile.test(value));
}, "手机格式不对");
//邮箱或手机验证规则
jQuery.validator.addMethod("mm", function (value, element) {
var mm = /^[a-z0-9._%-]+@([a-z0-9-]+\.)+[a-z]{2,4}$|^1[3|4|5|7|8]\d{9}$/;
return this.optional(element) || (mm.test(value));
}, "格式不对");
//电话或手机验证规则
jQuery.validator.addMethod("tm", function (value, element) {
var tm=/(^1[3|4|5|7|8]\d{9}$)|(^\d{3,4}-\d{7,8}$)|(^\d{7,8}$)|(^\d{3,4}-\d{7,8}-\d{1,4}$)|(^\d{7,8}-\d{1,4}$)/;
return this.optional(element) || (tm.test(value));
}, "格式不对");
//年龄
jQuery.validator.addMethod("age", function(value, element) {
var age = /^(?:[1-9]
e813
[0-9]?|1[01][0-9]|120)$/;
return this.optional(element) || (age.test(value));
}, "不能超过120岁");
///// 20-60 /^([2-5]\d)|60$/
//传真
jQuery.validator.addMethod("fax",function(value,element){
var fax = /^(\d{3,4})?[-]?\d{7,8}$/;
return this.optional(element) || (fax.test(value));
},"传真格式如：0371-68787027");
//验证当前值和目标val的值相等 相等返回为 false
jQuery.validator.addMethod("equalTo2",function(value, element){
var returnVal = true;
var id = $(element).attr("data-rule-equalto2");
var targetVal = $(id).val();
if(value === targetVal){
returnVal = false;
}
return returnVal;
},"不能和原始密码相同");
//大于指定数
jQuery.validator.addMethod("gt",function(value, element){
var returnVal = false;
var gt = $(element).data("gt");
if(value > gt && value != ""){
returnVal = true;
}
return returnVal;
},"不能小于0 或空");
//汉字
jQuery.validator.addMethod("chinese", function (value, element) {
var chinese = /^[\u4E00-\u9FFF]+$/;
return this.optional(element) || (chinese.test(value));
}, "格式不对");
//指定数字的整数倍
jQuery.validator.addMethod("times", function (value, element) {
var returnVal = true;
var base=$(element).attr('data-rule-times');
if(value%base!=0){
returnVal=false;
}
return returnVal;
}, "必须是发布赏金的整数倍");
//身份证
jQuery.validator.addMethod("idCard", function (value, element) {
var isIDCard1=/^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$/;//(15位)
var isIDCard2=/^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/;//(18位)
return this.optional(element) || (isIDCard1.test(value)) || (isIDCard2.test(value));
}, "格式不对");
})
index.jsp
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'index.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<link rel="stylesheet" type="text/css" href="plug-in/css/style.css">
</head>
<body style="padding: 50px;">
<div class="demobox"
style="width: 800px; background: #fff; border: #ddd solid 1px; padding: 30px;">
<div class="bl-notes bl-notes-info">
<h3>规则说明：</h3>
<p>
如：input type="email" value="" name="title" class="fn-tinput"
required data-rule-<em>email</em>="true"
data-msg-required="请输入email地址" data-msg-<em>email</em>="请输入正确的email地址"
</p>
<div class="fn-hr fn-mt10 fn-mb10"></div>
<p>required //必填</p>
<p>
data-rule-<em>email</em>="true" //正则为 email
</p>
<p>data-msg-required="请输入您的电子邮箱" //为空时的提示信息</p>
<p>
data-msg-<em>email</em>="邮箱格式不正确" //不符合正则的提示
</p>
<p>placeholder="电子邮件" //input中没有填写的提示</p>
</div>
<form action="index2.jsp" method="post" class="bl-form bl-formhor" id="jsForm">
<ul>
<li class="bl-form-group">
<label><em>*</em>Email：</label>
<div class="controls">
<input type="email" value="" name="2" class="fn-tinput" placeholder="电子邮件" required data-rule-email="true" data-msg-required="请输入您的电子邮箱" data-msg-email="邮箱格式不正确" />
</div>
</li>
<li class="bl-form-group">
<label><em>*</em>必填：</label>
<div class="controls">
<input type="text" value="" name="0" class="fn-tinput" placeholder="大于0" required data-msg-required="不能为空" data-rule-gt="true" data-gt="0"/>
</div>
</li>
<li class="bl-form-group">
<label><em>*</em>必填：</label>
<div class="controls">
<input type="text" value="" name="1" class="fn-tinput" placeholder="必填" required data-msg-required="不能为空"/>
</div>
</li>
<li class="bl-form-group">
<label>手机：</label>
<div class="controls">
<input type="text" value="" name="3" class="fn-tinput" placeholder="手机号" required data-rule-mobile="true" data-msg-required="请输入手机号" data-msg-mobile="请输入正确格式" />
</div>
</li>
<li class="bl-form-group">
<label>邮箱或手机：</label>
<div class="controls">
<input type="text" value="" name="4" class="fn-tinput" placeholder="邮箱或手机" required data-rule-mm="true" data-msg-required="请输入邮箱" data-msg-mm="请输入正确格式" />
</div>
</li>
<li class="bl-form-group">
<label>数字6-20位：</label>
<div class="controls">
<input type="text" value="" name="5" class="fn-tinput" placeholder="数字6-20位" required data-rule-number="true" data-msg-required="不能为空" data-msg-number="请输入正确的数字" data-msg-minlength="请输入最小6位"
minlength="6" maxlength="20"/>
</div>
</li>
<li class="bl-form-group">
<label>年龄：</label>
<div class="controls">
<input type="text" value="" name="6" class="fn-tinput" placeholder="年龄" required data-rule-age="true" data-msg-required="不能为空" data-msg-age="请输入数字" />
</div>
</li>
<li class="bl-form-group">
<label>新密码：</label>
<div class="controls">
<input class="fn-tinput" type="password" name="password" value="" placeholder="新密码" required id="password" data-rule-remote="php.php">
</div>
</li>
<li class="bl-form-group">
<label>确认新密码：</label>
<div class="controls">
<input class="fn-tinput" type="password" name="confirm_password" value="" placeholder="确认新密码" required equalTo="#password">
</div>
</li>
<li class="bl-form-group bl-form-text">
<label>单选：</label>
<div class="controls">
<label><input name="radio1" type="radio" value="" required>置顶</label>
<label><input name="radio1" type="radio" value="">推荐</label>
<span for="radio1" class="error"></span>
</div>
</li>
<li class="bl-form-group bl-form-text">
<label>多选：</label>
<div class="controls">
<label><input name="checkbox1" type="checkbox" value="" required>黑色</label>
<label><input name="checkbox1" type="checkbox" value="">白色</label>
<span for="checkbox1" class="error"></span>
</div>
</li>
<li class="bl-form-group">
<label>下拉菜单：</label>
<div class="controls">
<select name="select1" required>
<option value="">----选择菜单----</option>
<option value="1">菜单1</option>
<option value="2">菜单2</option>
<option value="3">菜单3</option>
<option value="4">菜单4</option>
</select>
</div>
</li>
<li class="bl-form-group">
<label>文本域：</label>
<div class="controls editor">
<textarea name="textarea1" cols="" rows="" required></textarea>
</div>
</li>
<li class="bl-form-group bl-form-btns"><label class="fn-vhid">提交：</label>
<div class="controls">
<button class="fn-btn btn-primary btn-submit submitBtn"
type="submit">提交按钮</button>
<button type="reset" class="fn-btn">重置</button>
</div></li>
</ul>
</form>
</div>
<script src="plug-in/js/jquery-1.10.2.min.js"></script>
<script src="plug-in/js/jquery.validate.min.js"></script>
<script src="plug-in/js/jquery-validate-method.js"></script>
<script>
$(function(){
//jquery.validate
$("#jsForm").validate({
submitHandler: function(form) {
//验证通过后 的js代码写在这里
alert("校验成功，提交表单");
form.submit(); //提交表单
}
})
})
</script>
</body>
</html>
使用技术：jquery-validate
验证规则与书写方法和样式无关，可以自行定义
框架搭建图：
运行结果图：
实战步骤
步骤1：导入jqeury 库文件
jquery-1.10.2.min.js
jquery.validate.min.js
步骤2：自定义封装校验规则
jquery-validate-method.js
步骤3：编写表单
index.jsp （表单验证页面）
index2.jsp （表单校验成功提交跳转界面）
相关代码：
jquery-validate-method.js
/*****************************************************************
jQuery Validate扩展验证方法
*****************************************************************/
$(function(){
//下面是一些常用的验证规则扩展
$.validator.setDefaults({
errorElement:'span'
});
//配置通用的默认提示语
$.extend($.validator.messages, {
required: '必填',
equalTo: "请再次输入相同的值"
});
jQuery.validator.addMethod("mail", function (value, element) {
var mail = /^[a-z0-9._%-]+@([a-z0-9-]+\.)+[a-z]{2,4}$/;
return this.optional(element) || (mail.test(value));
}, "邮箱格式不对");
//电话验证规则
jQuery.validator.addMethod("phone", function (value, element) {
var phone = /^0\d{2,3}-\d{7,8}$/;
return this.optional(element) || (phone.test(value));
}, "电话格式如：0371-68787027");
//区号验证规则
jQuery.validator.addMethod("ac", function (value, element) {
var ac = /^0\d{2,3}$/;
return this.optional(element) || (ac.test(value));
}, "区号如：010或0371");
//无区号电话验证规则
jQuery.validator.addMethod("noactel", function (value, element) {
var noactel = /^\d{7,8}$/;
return this.optional(element) || (noactel.test(value));
}, "电话格式如：68787027");
//手机验证规则
jQuery.validator.addMethod("mobile", function (value, element) {
var mobile = /^1[3|4|5|7|8]\d{9}$/;
return this.optional(element) || (mobile.test(value));
}, "手机格式不对");
//邮箱或手机验证规则
jQuery.validator.addMethod("mm", function (value, element) {
var mm = /^[a-z0-9._%-]+@([a-z0-9-]+\.)+[a-z]{2,4}$|^1[3|4|5|7|8]\d{9}$/;
return this.optional(element) || (mm.test(value));
}, "格式不对");
//电话或手机验证规则
jQuery.validator.addMethod("tm", function (value, element) {
var tm=/(^1[3|4|5|7|8]\d{9}$)|(^\d{3,4}-\d{7,8}$)|(^\d{7,8}$)|(^\d{3,4}-\d{7,8}-\d{1,4}$)|(^\d{7,8}-\d{1,4}$)/;
return this.optional(element) || (tm.test(value));
}, "格式不对");
//年龄
jQuery.validator.addMethod("age", function(value, element) {
var age = /^(?:[1-9]
e813
[0-9]?|1[01][0-9]|120)$/;
return this.optional(element) || (age.test(value));
}, "不能超过120岁");
///// 20-60 /^([2-5]\d)|60$/
//传真
jQuery.validator.addMethod("fax",function(value,element){
var fax = /^(\d{3,4})?[-]?\d{7,8}$/;
return this.optional(element) || (fax.test(value));
},"传真格式如：0371-68787027");
//验证当前值和目标val的值相等 相等返回为 false
jQuery.validator.addMethod("equalTo2",function(value, element){
var returnVal = true;
var id = $(element).attr("data-rule-equalto2");
var targetVal = $(id).val();
if(value === targetVal){
returnVal = false;
}
return returnVal;
},"不能和原始密码相同");
//大于指定数
jQuery.validator.addMethod("gt",function(value, element){
var returnVal = false;
var gt = $(element).data("gt");
if(value > gt && value != ""){
returnVal = true;
}
return returnVal;
},"不能小于0 或空");
//汉字
jQuery.validator.addMethod("chinese", function (value, element) {
var chinese = /^[\u4E00-\u9FFF]+$/;
return this.optional(element) || (chinese.test(value));
}, "格式不对");
//指定数字的整数倍
jQuery.validator.addMethod("times", function (value, element) {
var returnVal = true;
var base=$(element).attr('data-rule-times');
if(value%base!=0){
returnVal=false;
}
return returnVal;
}, "必须是发布赏金的整数倍");
//身份证
jQuery.validator.addMethod("idCard", function (value, element) {
var isIDCard1=/^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$/;//(15位)
var isIDCard2=/^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/;//(18位)
return this.optional(element) || (isIDCard1.test(value)) || (isIDCard2.test(value));
}, "格式不对");
})
index.jsp
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'index.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<link rel="stylesheet" type="text/css" href="plug-in/css/style.css">
</head>
<body style="padding: 50px;">
<div class="demobox"
style="width: 800px; background: #fff; border: #ddd solid 1px; padding: 30px;">
<div class="bl-notes bl-notes-info">
<h3>规则说明：</h3>
<p>
如：input type="email" value="" name="title" class="fn-tinput"
required data-rule-<em>email</em>="true"
data-msg-required="请输入email地址" data-msg-<em>email</em>="请输入正确的email地址"
</p>
<div class="fn-hr fn-mt10 fn-mb10"></div>
<p>required //必填</p>
<p>
data-rule-<em>email</em>="true" //正则为 email
</p>
<p>data-msg-required="请输入您的电子邮箱" //为空时的提示信息</p>
<p>
data-msg-<em>email</em>="邮箱格式不正确" //不符合正则的提示
</p>
<p>placeholder="电子邮件" //input中没有填写的提示</p>
</div>
<form action="index2.jsp" method="post" class="bl-form bl-formhor" id="jsForm">
<ul>
<li class="bl-form-group">
<label><em>*</em>Email：</label>
<div class="controls">
<input type="email" value="" name="2" class="fn-tinput" placeholder="电子邮件" required data-rule-email="true" data-msg-required="请输入您的电子邮箱" data-msg-email="邮箱格式不正确" />
</div>
</li>
<li class="bl-form-group">
<label><em>*</em>必填：</label>
<div class="controls">
<input type="text" value="" name="0" class="fn-tinput" placeholder="大于0" required data-msg-required="不能为空" data-rule-gt="true" data-gt="0"/>
</div>
</li>
<li class="bl-form-group">
<label><em>*</em>必填：</label>
<div class="controls">
<input type="text" value="" name="1" class="fn-tinput" placeholder="必填" required data-msg-required="不能为空"/>
</div>
</li>
<li class="bl-form-group">
<label>手机：</label>
<div class="controls">
<input type="text" value="" name="3" class="fn-tinput" placeholder="手机号" required data-rule-mobile="true" data-msg-required="请输入手机号" data-msg-mobile="请输入正确格式" />
</div>
</li>
<li class="bl-form-group">
<label>邮箱或手机：</label>
<div class="controls">
<input type="text" value="" name="4" class="fn-tinput" placeholder="邮箱或手机" required data-rule-mm="true" data-msg-required="请输入邮箱" data-msg-mm="请输入正确格式" />
</div>
</li>
<li class="bl-form-group">
<label>数字6-20位：</label>
<div class="controls">
<input type="text" value="" name="5" class="fn-tinput" placeholder="数字6-20位" required data-rule-number="true" data-msg-required="不能为空" data-msg-number="请输入正确的数字" data-msg-minlength="请输入最小6位"
minlength="6" maxlength="20"/>
</div>
</li>
<li class="bl-form-group">
<label>年龄：</label>
<div class="controls">
<input type="text" value="" name="6" class="fn-tinput" placeholder="年龄" required data-rule-age="true" data-msg-required="不能为空" data-msg-age="请输入数字" />
</div>
</li>
<li class="bl-form-group">
<label>新密码：</label>
<div class="controls">
<input class="fn-tinput" type="password" name="password" value="" placeholder="新密码" required id="password" data-rule-remote="php.php">
</div>
</li>
<li class="bl-form-group">
<label>确认新密码：</label>
<div class="controls">
<input class="fn-tinput" type="password" name="confirm_password" value="" placeholder="确认新密码" required equalTo="#password">
</div>
</li>
<li class="bl-form-group bl-form-text">
<label>单选：</label>
<div class="controls">
<label><input name="radio1" type="radio" value="" required>置顶</label>
<label><input name="radio1" type="radio" value="">推荐</label>
<span for="radio1" class="error"></span>
</div>
</li>
<li class="bl-form-group bl-form-text">
<label>多选：</label>
<div class="controls">
<label><input name="checkbox1" type="checkbox" value="" required>黑色</label>
<label><input name="checkbox1" type="checkbox" value="">白色</label>
<span for="checkbox1" class="error"></span>
</div>
</li>
<li class="bl-form-group">
<label>下拉菜单：</label>
<div class="controls">
<select name="select1" required>
<option value="">----选择菜单----</option>
<option value="1">菜单1</option>
<option value="2">菜单2</option>
<option value="3">菜单3</option>
<option value="4">菜单4</option>
</select>
</div>
</li>
<li class="bl-form-group">
<label>文本域：</label>
<div class="controls editor">
<textarea name="textarea1" cols="" rows="" required></textarea>
</div>
</li>
<li class="bl-form-group bl-form-btns"><label class="fn-vhid">提交：</label>
<div class="controls">
<button class="fn-btn btn-primary btn-submit submitBtn"
type="submit">提交按钮</button>
<button type="reset" class="fn-btn">重置</button>
</div></li>
</ul>
</form>
</div>
<script src="plug-in/js/jquery-1.10.2.min.js"></script>
<script src="plug-in/js/jquery.validate.min.js"></script>
<script src="plug-in/js/jquery-validate-method.js"></script>
<script>
$(function(){
//jquery.validate
$("#jsForm").validate({
submitHandler: function(form) {
//验证通过后 的js代码写在这里
alert("校验成功，提交表单");
form.submit(); //提交表单
}
})
})
</script>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- jquery前端校验框架validate使用笔记
- jquery的表单验证框架 --validate的使用
- jquery.validate.js【简单实用的表单验证框架】【进阶版】
- jquery表单验证框架 jquery.validate.min.js的使用
- jQuery Validate 表单验证插件----利用jquery.metadata.js将校验规则直接写在class属性里面并定义错误信息的提示
- JQuery -- Validate, Jquery 表单校验
- jQuery.validate.js表单校验
- bootstrap+jQuery.validate表单校验
- jquery.validate.js【简单实用的表单验证框架】
- jQuery Validate表单验证插件 添加class属性形式的校验
- JQuery -- Validate, Jquery 表单校验
- 使用JQuery.Validate插件来校验页面表单有效性
- 利用struts2的json返回方式来控制jquery.validate的remote框架，进行表单验证
- jQuery.Validate表单验证校验-说明
- JQuery 表单校验插件 validate 使用纪录
- 将jquery validate校验框架的remote异步验证设置为同步校验
- jQuery Validate 校验框架学习总结
- jQuery Validate 表单验证插件----自定义校验结果样式
- 表单实时校验插件——jquery.validateForm.js(v.2.0)