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

jquery验证插件对表格数据的验_js与jquery的区别①:引入js类库以及样式

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新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账号...

(0)


相关推荐

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号