此验证js,是在jquery 的基础上编写的,需要先引用jquery文件.
可验证对象:
单行文本框,多行文本框,下拉列表
可实现的验证内容:
(单行文本框,多行文本框)非空,最大长度,最小长度, 数字范围,纯数字,数字和英文,中间存在空格,邮箱,身份证,校验密码.
下拉列表是否选定.
通过验证后,可以恢复 默认提示语.
用法:
引用jquery 文件.
1导入js文件,注意导入路径 例如://<script type="text/javascript"src="<%=request.getContextPath() %>/js/crlCheckCommons.js"></script>
2在需要验证控件后面添加提示语标签,并给标签指定style来指定提示语的颜色 (标签必须有 可以是<span> 或 <div>,提示语可以为空 ),
例如:
<form id="form" name="form" action="<%=request.getContextPath()%>/appportal/app_addApp.action" method="post" >
<input type='text' id="username" name="username" /><span style="color:#888">姓名为必填项</span>
<input type='text' id="password" name="password" /><span style="color:#888">密码为必填项/span>
<input type="button" id="mySubmit" />
</form>
3.
写js代码在鼠标离开文本框时验证
<script type="text/javascript">
$(function(){
$("#username").blur(function(){
if(required($(this),'姓名不能为空') && minLength($(this),4,'姓名最小长度为4') && maxLength($(this),60,'姓名最大长度为60'));
});
});
$(function(){
$("#password").blur(function(){
if(required($(this),'密码此项不能为空') && minLength($(this),4,'密码最小长度为4') && maxLength($(this),60,'密码最大长度为60'));
});
});
$(function(){
$("#mySubmit").click(function(){
haveError = false; //全局错误信息变量, 如果有错误,变量值会变成ture ,再验证完所有之后再判断,是否要提交表单
$("#username").blur();
$("#password").blur();
if(!haveError){
$("#form").submit();
}
});
});
</script>
要注意的:
如果后面有默认提示信息,则必须给该 <span> 或<div> 加颜色样式,并设置变量 firstMsgColor = "color:颜色"; 此变量控制 验证成功后 补写提示语的样式颜色.
