jquery验证插件对表格数据的验_js与jquery的区别

大家好，又见面了，我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE稳定放心使用

①：引入js类库以及样式

<link href="${basePath}/css/validationEngine.jquery.css"
			rel="stylesheet" type="text/css" />
		<script language="javascript"
			src="${basePath}/js/jquery/jquery-1.6.min.js"></script>
		<script src="${basePath}/js/jquery/jquery.validationEngine-zh_CN.js"
			type="text/javascript" charset="utf-8"></script>
		<script src="${basePath}/js/jquery/jquery.validationEngine.js"
			type="text/javascript" charset="utf-8"></script>

②：为表单添加验证的样式（通过注册表单说明下有哪些验证）

<form action="${basePath}/customer/customer_save.action" id="signup_form"
								method="post">
								<table border="0" cellspacing="0" cellpadding="0"
									class="table_2">
									<tr>
										<th valign="top">
											<span class="must">*</span>用户名:
										</th>
										<td>
											<input
												class="validate[required,minSize[6],custom[onlyLetterNumber],maxSize[20],ajax[ajaxUserName]] input_1"
												id="user_userNo"  name="customer.username" type="text" />
											<p>
												6-20个字符，允许英文字母、数字、下划线.
											</p>
										</td>
									</tr>
									<tr>
										<th valign="top">
											<span class="must">*</span>密码:
										</th>
										<td>
											<input
												class="validate[required,minSize[6],custom[onlyLetterNumber],maxSize[20]] input_1"
												id="user_passwd" name="customer.password" maxLength="20"
												type="password" />
											<p>
												请选用安全的密码
											</p>
										</td>
									</tr>
									<tr>
										<th>
											<span class="must">*</span>确认密码:
										</th>
										<td>
											<input class="validate[required,equals[user_passwd]] input_1"
												id="user_password_confirmation" maxLength="20"
												name="repassword" size="30" type="password" />
										</td>
									</tr>
									<tr>
										<th valign="top">
											<span class="must">*</span>电子邮箱:
										</th>
										<td>
											<input
												class="validate[required,custom[email]] input_1"
												id="user_email" name="email" maxLength="100"
												type="text" />
										</td>
									</tr>
									<tr>
										<th valign="top">
											住址:
										</th>
										<td>
											<input
												class="input_1"
												id="user_userName" maxlength="100" name="customer.address"
												type="text" />
										</td>
									</tr>
									<tr>
										<th valign="top">
											手机:
										</th>
										<td>
											<input
												class=" input_1"
												id="user_mobile" maxlength="11" name="customer.mobile"
												type="text" />
										</td>
									</tr>
									<tr>
										<th>
											<span class="must">*</span>验证码:
										</th>
										<td>
											<input
												class="validate[required,ajax[ajaxVerifyCode]] input_3"
												id="verifyCode" name="verifyCode" type="text" maxLength="4" />
											<img src="${basePath}/system/validate.action" id="verify" alt="验证码"
												title="看不清？点击换另一张" οnclick="RefreshCode(this)" width="90px" height="30px">
											<a href="javascript:void(0);"
												οnclick="RefreshCode(document.getElementById('verify'))">看不清。换一个</a>
											<script language="javascript">
							              	  	function RefreshCode(obj){
							            			obj.src =obj.src+"?code=" + Math.random();
												}
							              	  </script>
										</td>
									</tr>
									<tr>
										<th>
											 
										</th>
										<td>
											<input name="checkbox" type="checkbox"
												class="validate[required]" id="auto" checked="checked" />
											<label for="auto">
												我已经阅读并同意
											</label>
											<a href="agree.jsp" target="_blank">注册条款</a>
										</td>
									</tr>
								</table>
								<div class="btn_area_1" style="padding: 10px;">
									<input type="submit" name="button" id="button" value="注　册"
										class="btn_1" />
								</div>
							</form>

说明：用户名————验证非空，长度在6到20之间，通过ajaxUserName验证用户名唯一

密码————验证非空，长度在6到20之间

确认密码————验证非空，必须和密码填写内容一致

邮箱————非空且为正确的邮箱格式

验证码————非空，ajax验证验证码是否正确

注册条款————非空

这里附上juery.validationgEngine-zh_CN.js代码

(function($){
$.fn.validationEngineLanguage = function(){
};
$.validationEngineLanguage = {
newLang: function(){
$.validationEngineLanguage.allRules = {
"required": { // Add your regex rules here, you can take telephone as an example
"regex": "none",
"alertText": "* 此处不可空白",
"alertTextCheckboxMultiple": "* 请选择一个项目",
"alertTextCheckboxe": "* 您必须勾选此栏",
"alertTextDateRange": "* 日期范围不可空白"
},
"requiredInFunction": { 
"func": function(field, rules, i, options){
return (field.val() == "test") ? true : false;
},
"alertText": "* Field must equal test"
},
"dateRange": {
"regex": "none",
"alertText": "* 无效的 ",
"alertText2": " 日期范围"
},
"dateTimeRange": {
"regex": "none",
"alertText": "* 无效的 ",
"alertText2": " 时间范围"
},
"minSize": {
"regex": "none",
"alertText": "* 最少 ",
"alertText2": " 个字符"
},
"maxSize": {
"regex": "none",
"alertText": "* 最多 ",
"alertText2": " 个字符"
},
"groupRequired": {
"regex": "none",
"alertText": "* 你必需选填其中一个栏位"
},
"min": {
"regex": "none",
"alertText": "* 最小值為 "
},
"max": {
"regex": "none",
"alertText": "* 最大值为 "
},
"past": {
"regex": "none",
"alertText": "* 日期必需早于 "
},
"future": {
"regex": "none",
"alertText": "* 日期必需晚于 "
},	
"maxCheckbox": {
"regex": "none",
"alertText": "* 最多选取 ",
"alertText2": " 个项目"
},
"minCheckbox": {
"regex": "none",
"alertText": "* 请选择 ",
"alertText2": " 个项目"
},
"equals": {
"regex": "none",
"alertText": "* 请输入与上面相同的密码"
},
"creditCard": {
"regex": "none",
"alertText": "* 无效的信用卡号码"
},
"phone": {
// credit: jquery.h5validate.js / orefalo
"regex": /^([\+][0-9]{1,3}[ \.\-])?([\(]{1}[0-9]{2,6}[\)])?([0-9 \.\-\/]{3,20})((x|ext|extension)[ ]?[0-9]{1,4})?$/,
"alertText": "* 无效的电话号码"
},
"mobile":{
"regex":/^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/,
"alertText":"* 无效手机号"
},
"email": {
// Shamelessly lifted from Scott Gonzalez via the Bassistance Validation plugin http://projects.scottsplayground.com/email_address_validation/
"regex": /^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i,
//regex":/^[a-zA-Z0-9_.]{1,}@[a-zA-Z0-9_]{1,}.[a-zA-Z0-9_]{1,}|.[a-zA-z0-9_]{1,}$/,
"alertText": "* 邮件地址需由字母、数字或下划线组成"
},
"integer": {
"regex": /^[\-\+]?\d+$/,
"alertText": "* 不是有效的整数"
},
"number": {
// Number, including positive, negative, and floating decimal. credit: orefalo
"regex": /^[\-\+]?((([0-9]{1,3})([,][0-9]{3})*)|([0-9]+))?([\.]([0-9]+))?$/,
"alertText": "* 无效的数字"
},
"post":{
"regex":/^[1-9][0-9]{5}$/,
"alertText":"* 无效邮政编码,6位数字，不能以0开头"
},
"date": {
"regex": /^\d{4}[\/\-](0?[1-9]|1[012])[\/\-](0?[1-9]|[12][0-9]|3[01])$/,
"alertText": "* 无效的日期，格式必需为 YYYY-MM-DD"
},
"ipv4": {
"regex": /^((([01]?[0-9]{1,2})|(2[0-4][0-9])|(25[0-5]))[.]){3}(([0-1]?[0-9]{1,2})|(2[0-4][0-9])|(25[0-5]))$/,
"alertText": "* 无效的 IP 地址"
},
"url": {
"regex": /^(https?|ftp):\/\/(((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:)*@)?(((\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5]))|((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?)(:\d*)?)(\/((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)+(\/(([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)*)*)?)?(\?((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)|[\uE000-\uF8FF]|\/|\?)*)?(\#((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)|\/|\?)*)?$/i,
"alertText": "* Invalid URL"
},
"onlyNumberSp": {
"regex": /^[0-9\ ]+$/,
"alertText": "* 只能填数字"
},
"onlyLetterSp": {
"regex": /^[a-zA-Z\ \']+$/,
"alertText": "* 只接受英文字母大小写"
},
"onlyLetterNumber": {
"regex": /^[0-9a-zA-Z_]+$/,
"alertText": "* 允许英文字母、数字、下划线"
},
// --- CUSTOM RULES -- Those are specific to the demos, they can be removed or changed to your likings
"ajaxUserCall": {
"url": "ajaxValidateFieldUser",
// you may want to pass extra data on the ajax call
"extraData": "name=eric",
"alertText": "* 此名称已被其他人使用",
"alertTextLoad": "* 正在确认名称是否有其他人使用，请稍等。"
},
"ajaxUserCallPhp": {
"url": "phpajax/ajaxValidateFieldUser.php",
// you may want to pass extra data on the ajax call
"extraData": "name=eric",
// if you provide an "alertTextOk", it will show as a green prompt when the field validates
"alertTextOk": "* 此帐号名称可以使用",
"alertText": "* 此名称已被其他人使用",
"alertTextLoad": "* 正在确认帐号名称是否有其他人使用，请稍等。"
},
"ajaxNameCall": {
// remote json service location
"url": "ajaxValidateFieldName",
// error
"alertText": "* 此名称可以使用",
// if you provide an "alertTextOk", it will show as a green prompt when the field validates
"alertTextOk": "* 此名称已被其他人使用",
// speaks by itself
"alertTextLoad": "* 正在确认名称是否有其他人使用，请稍等。"
},
"ajaxNameCallPhp": {
// remote json service location
"url": "phpajax/ajaxValidateFieldName.php",
// error
"alertText": "* 此名称已被其他人使用",
// speaks by itself
"alertTextLoad": "* 正在确认名称是否有其他人使用，请稍等。"
},
"validate2fields": {
"alertText": "* 请输入 HELLO"
},
//tls warning:homegrown not fielded 
"dateFormat":{
"regex": /^\d{4}[\/\-](0?[1-9]|1[012])[\/\-](0?[1-9]|[12][0-9]|3[01])$|^(?:(?:(?:0?[13578]|1[02])(\/|-)31)|(?:(?:0?[1,3-9]|1[0-2])(\/|-)(?:29|30)))(\/|-)(?:[1-9]\d\d\d|\d[1-9]\d\d|\d\d[1-9]\d|\d\d\d[1-9])$|^(?:(?:0?[1-9]|1[0-2])(\/|-)(?:0?[1-9]|1\d|2[0-8]))(\/|-)(?:[1-9]\d\d\d|\d[1-9]\d\d|\d\d[1-9]\d|\d\d\d[1-9])$|^(0?2(\/|-)29)(\/|-)(?:(?:0[48]00|[13579][26]00|[2468][048]00)|(?:\d\d)?(?:0[48]|[2468][048]|[13579][26]))$/,
"alertText": "* 无效的日期格式"
},
//tls warning:homegrown not fielded 
"dateTimeFormat": {
"regex": /^\d{4}[\/\-](0?[1-9]|1[012])[\/\-](0?[1-9]|[12][0-9]|3[01])\s+(1[012]|0?[1-9]){1}:(0?[1-5]|[0-6][0-9]){1}:(0?[0-6]|[0-6][0-9]){1}\s+(am|pm|AM|PM){1}$|^(?:(?:(?:0?[13578]|1[02])(\/|-)31)|(?:(?:0?[1,3-9]|1[0-2])(\/|-)(?:29|30)))(\/|-)(?:[1-9]\d\d\d|\d[1-9]\d\d|\d\d[1-9]\d|\d\d\d[1-9])$|^((1[012]|0?[1-9]){1}\/(0?[1-9]|[12][0-9]|3[01]){1}\/\d{2,4}\s+(1[012]|0?[1-9]){1}:(0?[1-5]|[0-6][0-9]){1}:(0?[0-6]|[0-6][0-9]){1}\s+(am|pm|AM|PM){1})$/,
"alertText": "* 无效的日期或时间格式",
"alertText2": "可接受的格式： ",
"alertText3": "mm/dd/yyyy hh:mm:ss AM|PM 或 ", 
"alertText4": "yyyy-mm-dd hh:mm:ss AM|PM"
},
"ajaxUserNo":{
"url": "customer_validUserName.action",
"alertText": "* 此帐号已被其他人使用",
"alertTextLoad": "* 验证帐号是否可用,请稍等...",
"alertTextOk": "此帐号可以使用"
},
"ajaxUserName":{
"url": "customer_validUserName.action",
"alertText": "* 用户姓名已被其他人使用",
"alertTextLoad": "* 验证用户姓名是否可用,请稍候..."
},
"ajaxUserEmail":{
"url": "users_valid_user_email.action",
"alertText": "* 此邮箱已被其他人使用",
"alertTextLoad": "* 验证邮箱是否已被使用,请稍等..."
},
"ajaxVerifyCode":{
"url": "customer_validateCode.action",
"alertText": "* 验证码输入不正确",
"alertTextLoad": "* 匹配验证码中,请稍等..."
}
};
}
};
$.validationEngineLanguage.newLang();
})(jQuery);

在这个js文件里面可以自己定义验证的ajax方法，如：ajaxUserEmail，ajaxVerifyCode，ajaxUserName等等

③：页面加载完成后，初始化插件

jQuery(document).ready(function(){
$("#signup_form").validationEngine({promptPosition: "topRight"});
});

④：action：

	/**
* 验证用户账号是否已经存在
* 
* @return
*/
public String validUserName() {
PrintWriter out = null;
JSONArray json = new JSONArray();
try {
HttpServletResponse response = ServletActionContext.getResponse();
HttpServletRequest request = (HttpServletRequest) ActionContext
.getContext().get(ServletActionContext.HTTP_REQUEST);
response.setCharacterEncoding("UTF-8");
out = response.getWriter();
String validateId = request.getParameter("fieldId");
String validateValue = request.getParameter("fieldValue");
// 注意下面的顺序，感觉这是个缺陷之一，不过可以在jquery.validationEngine.js更改，
json.add(validateId);
boolean unique = customerDao.isUnique(validateValue);
if (!unique) {
json.add(false);
} else {
json.add(true);
}
out.print(json.toString());
} catch (Exception e) {
e.printStackTrace();
} finally {
if (null != out) {
out.flush();
out.close();
}
}
return null;
}

ajax验证验证码

	/**
* Desc ajax验证验证码
* 
* @author:dongliyuan
* @date:2014-11-4 上午10:35:00
* @return
* @throws Exception
*/
@SuppressWarnings("unchecked")
public String validateCode() throws Exception {
PrintWriter out = null;
JSONArray json = new JSONArray();
try {
Map session = ActionContext.getContext().getSession();
HttpServletRequest request = (HttpServletRequest) ActionContext
.getContext().get(ServletActionContext.HTTP_REQUEST);
HttpServletResponse response = ServletActionContext.getResponse();
response.setCharacterEncoding("UTF-8");
out = response.getWriter();
String validateId = request.getParameter("fieldId");
String validateValue = request.getParameter("fieldValue");
// 注意下面的顺序，感觉这是个缺陷之一，不过可以在jquery.validationEngine.js更改，
json.add(validateId);
if (session.get("validateCode").equals(
java.net.URLDecoder.decode(validateValue, "UTF-8").trim())) {
json.add(true);
} else {
json.add(false);
}
out.print(json.toString());
} catch (Exception e) {
e.printStackTrace();
} finally {
if (null != out) {
out.flush();
out.close();
}
}
return null;
}

action配置就不写了

发布者：全栈程序员-用户IM，转载请注明出处：https://javaforall.cn/189055.html原文链接：https://javaforall.cn

【正版授权，激活自己账号】： Jetbrains全家桶Ide使用，1年售后保障，每天仅需1毛

【官方授权正版激活】： 官方授权正版激活支持Jetbrains家族下所有IDE 使用个人JB账号...