/用户注册&登录 相关js函数 (基于jquery库)
/**
* 验证表单元素 仅支持必填和 格式校验 密码匹配
* @param id 表单id
* @param options { errorElClass errorShowClass loop}
* 实例:text <input name="username" type="text" id="username" regValidityTxt="格式为10位数字" reg="^[0-9]{10}$" errorLabel="usernameError" notBlank="notBlank" valueMissingTxt="不能为空">
* textarea <textarea rows="1" cols="1" id="textarea" reg="^[a-z]{2,8}$" regValidityTxt="格式错误a-z" errorLabel="emailError" notBlank="notBlank" valueMissingTxt="不能为空">asdfadf</textarea>
* 单选和多选 <input type="checkbox" name="agree" value="true" requiredCheck="requiredCheck" requiredCheckTxt="请阅读协议" 1errorLabel="checkError"/>
* <input name="repassword" type="password" id="repassword" notBlank="notBlank" valueMissingTxt="不能为空" errorLabel="confirmError" matchFor="password" matchForTxt="两次输入密码不一致"/>
*/
var validateForm = function(id,options){
var errorCount = 0 ;
var targetEnumIdValidity = true;
var isTargetEnum = false; //是否单个元素验证
var $enum = $('form#'+id+' :input,textArea,select'); //需要校验的元素
var errorElClass = options.errorElClass?options.errorElClass:"error"; //验证失败样式
var errorShowClass = options.errorShowClass?options.errorShowClass:"errorLabel";
var targetEnumId = options.targetEnumId;
var tipClass = options.tipClass?options.tipClass:"tipClass";
var showTip = options.showTip;
var loop = options.loop; //是否全部校验 (否 如果有一个校验失败则停止校验)
$.each($enum,function(){
var $e = $(this);
if(targetEnumId){
if(targetEnumId!=$e.attr('id'))
isTargetEnum = true;
else
isTargetEnum =false;
}
if(!isTargetEnum){
var reg = $e.attr('reg'); //需要添加元素属性reg 正则
var matchFor = $e.attr('matchFor'); //匹配
var matchForTxt = $e.attr('matchForTxt'); //匹配不成功 提示
var regValidityTxt = $e.attr('regValidityTxt'); //匹配失败 提示(可为空)
var notBlank =$e.attr('notBlank'); // 必填
var valueMissingTxt = $e.attr('valueMissingTxt'); // 为空提示
var requiredCheck = $e.attr('requiredCheck'); //必选
var requiredCheckTxt = $e.attr('requiredCheckTxt'); //未选提示
var errorLabel = $e.attr('errorLabel');
var $error = $('#'+errorLabel);
var val = $e.val();
var tip = $e.attr('tip')? $e.attr('tip'): $e.attr('regValidityTxt');
//元素获取焦点取消错误样式
$e.focus(function(){
$error.html('');
$error.removeClass(errorShowClass);
$e.removeClass(errorElClass);
if(showTip){
$error.addClass(tipClass);
} $error.html(tip);
});
if(requiredCheck){
//用于判断是否勾选 阅读条款
if($e.is("input:radio,input:checkbox")){
if(!$e.is(":checked")){
commonDo($e,$error,requiredCheckTxt,errorShowClass,errorElClass,showTip,tipClass);
if(!loop){
targetEnumIdValidity = false;
return;
}
errorCount++;
}
}
}
//判断非空 必填字段
if(notBlank){
if (val == undefined || val == null || val == "null" || val.trim() == "" || val.trim().length == 0){
commonDo($e,$error,valueMissingTxt,errorShowClass,errorElClass,showTip,tipClass);
if(!loop){
targetEnumIdValidity = false;
return;
}
errorCount++;
}
}
//判断正则
if(reg){
var $reg = new RegExp(reg);
if(!$reg.test(val)){
commonDo($e,$error,regValidityTxt,errorShowClass,errorElClass,showTip,tipClass);
if(!loop){
targetEnumIdValidity = false;
return;
}
errorCount++;
}
}
//判断是否与目标表单值相等 主要用于密码确认
if(matchFor){
var $matchTarget = $('#'+matchFor);
if($matchTarget && ($matchTarget.val() != val)){
commonDo($e,$error,matchForTxt,errorShowClass,errorElClass,showTip,tipClass);
if(!loop){
targetEnumIdValidity = false;
return;
}
errorCount++;
}
}
}
});
// js return在each 循环中 为跳出循环
if(loop)
return !errorCount;
else
return targetEnumIdValidity;
}
/**
* 表单验证 效果 qianxiaozhi
* @param $e
* @param $error
* @param text
* @param errorShowClass
* @param errorElClass
*/
function commonDo($e,$error,text,errorShowClass,errorElClass,showTip,tipClass){
if($error){
$error.html(text?text:'');
$error.addClass(errorShowClass);
if(showTip){
$error.removeClass(tipClass);
}
}
if(errorElClass){
$e.addClass(errorElClass);
}
}
/**
* 异步提交订单
* @param options
*/
var submitCallBack = function(options){
var errorElClass = options.errorElClass?options.errorElClass:"error"; //验证失败样式
var errorShowClass = options.successShowClass?options.successShowClass:"errorLabel";
var targetEnumId = options.targetEnumId? options.targetEnumId:"error";
var error = options.error;
var $e = $("#"+targetEnumId);
if($e){
var errorLabel = $e.attr('errorLabel');
var $error = $('#'+errorLabel);
//填充错误信息
commonDo($e,$error,error,errorShowClass,errorElClass);
}
}
/**
* 表单元素渲染 是否支持tip
* @param id
* @param option
*/
var formTipRender = function(id,tipClass){
var $enum = $('form#'+id+' :input,textArea,select'); //需要校验的元素
var $tipClass = tipClass?tipClass:"tipClass";
$.each($enum,function(){
var $e = $(this);
var tipShowLabel = $e.attr('tipShowLabel')?$e.attr('tipShowLabel'):$e.attr('errorLabel');
var tip = $e.attr('tip')? $e.attr('tip'): $e.attr('regValidityTxt');
//元素获取焦点取消错误样式
$e.focus(function(){
if(tipShowLabel){
var $tip = $('#'+tipShowLabel);
if($tip){
$tip.removeClass();
$tip.addClass($tipClass);
} $tip.html(tip);
}
});
$e.blur(function(){
var $tip = $('#'+tipShowLabel);
if(tipShowLabel && $tip.hasClass($tipClass)){
$tip.html('');
}
});
});
}
使用实例:
<input name="username" type="text" id="username" value="$!stringEscapeUtils.escapeHtml($!username)" class="common-input" placeholder="请输入用户名" reg="^[(\u4e00-\u9fa5)a-zA-Z0-9_-]{2,20}$" regValidityTxt="用户名由英文、数字、汉字或“_”、“-”4-20位字符组成" errorLabel="usernameError" notBlank="notBlank" valueMissingTxt="用户名不能为空">
<div id="usernameError" class="tipClass" ></div>
<input type="password" name="password" id="password" class="common-input" placeholder="请输入密码" notBlank="notBlank" reg="^[a-zA-Z0-9_-]{6,16}$" regValidityTxt="密码由英文、数字或“_”、“-”6-16位字符组成" valueMissingTxt="密码不能为空" errorLabel="pwdError">
<div id="pwdError" class="tipClass"></div>
<input name="repassword" type="password" id="repassword" class="common-input" placeholder="请再次输入密码" notBlank="notBlank" tip="请再次输入密码" valueMissingTxt="密码不能为空" errorLabel="confirmError" matchFor="password" matchForTxt="两次输入密码不一致">
<div id="confirmError" class="tipClass"></div>
页面引入js部分
//绑定邮箱焦点离开事件
$('#password').blur(function(){
validateForm('frm_reg',{loop:false,targetEnumId:$(this).attr('id'),errorElClass:"error-common-input",errorShowClass:"red",
showTip:true,tipClass:"tipClass"});
});
//绑定邮箱焦点离开事件
$('#repassword').blur(function(){
validateForm('frm_reg',{loop:false,targetEnumId:$(this).attr('id'),errorElClass:"error-common-input",errorShowClass:"red",
showTip:true,tipClass:"tipClass"});
});
//表单提交 验证所有元素是否符合要求
$('#btnRegister').click(function(){
//做一些简单规则验证 异步提交由后台判断其他情况
var options ={loop:true,errorElClass:"error-common-input",errorShowClass:"red",showTip:true,tipClass:"tipClass"};
if(validateForm('#frm_reg',options)){
$('#frm_reg').submit();
}
});