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

大家好，又见面了，我是你们的朋友全栈君。

①：引入js类库以及样式

代码语言：javascript复制

<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>

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

代码语言：javascript复制

<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代码

代码语言：javascript复制

(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-uD7FFuF900-uFDCFuFDF0-uFFEF]) )*)|((x22)((((x20|x09)*(x0dx0a))?(x20|x09) )?(([x01-x08x0bx0cx0e-x1fx7f]|x21|[x23-x5b]|[x5d-x7e]|[u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF])|(\([x01-x09x0bx0cx0d-x7f]|[u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF]))))*(((x20|x09)*(x0dx0a))?(x20|x09) )?(x22)))@((([a-z]|d|[u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF])|(([a-z]|d|[u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF])([a-z]|d|-|.|_|~|[u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF])*([a-z]|d|[u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF]))).) (([a-z]|[u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF])|(([a-z]|[u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF])([a-z]|d|-|.|_|~|[u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF])*([a-z]|[u00A0-uD7FFuF900-uFDCFuFDF0-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-uD7FFuF900-uFDCFuFDF0-uFFEF])|(%[da-f]{2})|[!$&'()* ,;=]|:)*@)?(((d|[1-9]d|1dd|2[0-4]d|25[0-5]).(d|[1-9]d|1dd|2[0-4]d|25[0-5]).(d|[1-9]d|1dd|2[0-4]d|25[0-5]).(d|[1-9]d|1dd|2[0-4]d|25[0-5]))|((([a-z]|d|[u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF])|(([a-z]|d|[u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF])([a-z]|d|-|.|_|~|[u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF])*([a-z]|d|[u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF]))).) (([a-z]|[u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF])|(([a-z]|[u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF])([a-z]|d|-|.|_|~|[u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF])*([a-z]|[u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF]))).?)(:d*)?)(/((([a-z]|d|-|.|_|~|[u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF])|(%[da-f]{2})|[!$&'()* ,;=]|:|@) (/(([a-z]|d|-|.|_|~|[u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF])|(%[da-f]{2})|[!$&'()* ,;=]|:|@)*)*)?)?(?((([a-z]|d|-|.|_|~|[u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF])|(%[da-f]{2})|[!$&'()* ,;=]|:|@)|[uE000-uF8FF]|/|?)*)?(#((([a-z]|d|-|.|_|~|[u00A0-uD7FFuF900-uFDCFuFDF0-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]ddd|d[1-9]dd|dd[1-9]d|ddd[1-9])$|^(?:(?:0?[1-9]|1[0-2])(/|-)(?:0?[1-9]|1d|2[0-8]))(/|-)(?:[1-9]ddd|d[1-9]dd|dd[1-9]d|ddd[1-9])$|^(0?2(/|-)29)(/|-)(?:(?:0[48]00|[13579][26]00|[2468][048]00)|(?:dd)?(?: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]ddd|d[1-9]dd|dd[1-9]d|ddd[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等等

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

代码语言：javascript复制

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

④：action：

代码语言：javascript复制

	/**
* 验证用户账号是否已经存在
* 
* @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验证验证码

代码语言：javascript复制

	/**
* 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配置就不写了

ajax 验证码

0 人点赞