一款简单易用的jQuery表单验证插件validator.js,在表单填写的过程中,就会出现对应输入框或选择项的验证提示了,基本时同步提示的,修改正确了才能提交。
页面的head部分,需设置页面元素的样式,代码如下:
body {margin:0;font-family:'Microsoft YaHei','Lantinghei SC','Open Sans',Arial,'Hiragino Sans GB','STHeiti','WenQuanYi Micro Hei','SimSun',sans-serif;}
/* block */
.st-block,
.st-btn.st-block,
.st-control.st-block {display:block;width:100%;box-sizing:border-box;}
/* disabled */
.disabled, [disabled],
.st-btn.disabled, .st-btn[disabled],
.st-control.disabled, .st-control[disabled] {opacity:0.6;filter:alpha(opacity=60);cursor:not-allowed;}
.st-btn {line-height:20px;padding:5px 20px;box-sizing:border-box;display:inline-block;text-align:center;border-radius:3px;border:1px solid transparent;color:#333;cursor:pointer;}
.st-btn:not(.disabled):not([disabled]):active {opacity:0.8;filter:alpha(opacity=80);}
.st-btn {background-color:#e5e5e5;}
.st-btn:hover {background-color:#d0d0d0;color:inherit;}
.st-control {line-height:20px;height:32px;box-sizing:border-box;padding:5px 10px;font-size:14px;border:1px solid #d5d5d5;}
.st-control:focus {border-color:#bbb;}
[type="radio"].st-control, [type="checkbox"].st-control {border:none;padding:0;height:20px;}
textarea.st-control {min-height:60px;font-size:13px;line-height:16px;}
select.st-control[multiple] {height:100px;}
.st-error {color:#fa837d;display:none;font-size:13px;padding-top:5px;}
页面的body部分,需设置好form表单的各元素内容,代码如下:
<form id="upForm" style="width:450px;margin:0 auto;padding:100px 0;">
<h1 style="text-align:center;padding-bottom:30px;font-size:24px;">简单易用的jQuery表单验证插件validator.js</h1>
<input type="text" placeholder="邮箱地址" class="st-control st-block" name="umail" value="admin@sucaihuo.com" />
<div class="st-error" id="err1"></div>
<br />
<input type="password" placeholder="登录密码 字母加数字要包含一个大写字母" class="st-control st-block" name="upwd" />
<div class="st-error" id="err2"></div>
<br />
<input type="password" placeholder="确认密码" class="st-control st-block" name="urepwd" />
<div class="st-error" id="err3"></div>
<br />
性别:
<label><input type="radio" name="usex" class="st-control" />男</label>
<label><input type="radio" name="usex" class="st-control" />女</label>
<br />
<div class="st-error" id="err4"></div>
<br />
爱好:
<label><input type="checkbox" name="uhob" class="st-control" />篮球</label>
<label><input type="checkbox" name="uhob" class="st-control" />足球</label>
<label><input type="checkbox" name="uhob" class="st-control" />羽毛球</label>
<label><input type="checkbox" name="uhob" class="st-control" />棒球</label>
<label><input type="checkbox" name="uhob" class="st-control" />乒乓球</label>
<br />
<div class="st-error" id="err5"></div>
<br />
<select name="ucolor" class="st-control st-block">
<option value="">喜欢的颜色</option>
<option value="black">黑色</option>
<option value="blue">蓝色</option>
<option value="green">绿色</option>
<option value="red">红色</option>
<option value="orange">橙色</option>
</select>
<div class="st-error" id="err6"></div>
<br />
<a id="submit" class="st-btn st-block">提交</a>
</form>
页面的底部,需引入jQuery库和验证插件,并设置验证的容器和对应规则,代码如下:
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/validator.js" charset="utf-8"></script>
<script>
var eles = {
form : $('#upForm'),
umail : $('[name="umail"]'),
upwd : $('[name="upwd"]'),
urepwd : $('[name="urepwd"]'),
usex : $('[name="usex"]'),
uhob : $('[name="uhob"]'),
ucolor : $('[name="ucolor"]'),
submit : $('#submit'),
err1 : $('#err1'),
err2 : $('#err2'),
err3 : $('#err3'),
err4 : $('#err4'),
err5 : $('#err5'),
err6 : $('#err6'),
errTxt1 : '邮箱格式错误!',
errTxt2 : '密码格式错误!',
errTxt3 : '两此输入的密码不一致!',
errTxt4 : '必须选择性别!',
errTxt5 : '请选择爱好2-4项!',
errTxt6 : '请选择喜欢的颜色!',
norm_mail : /^([a-zA-Z0-9]+[-_.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[-_.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,6}$/,
norm_pwd : /^(?![a-zA-Z]+$)(?![A-Z0-9]+$)(?![A-Z\W_]+$)(?![a-z0-9]+$)(?![a-z\W_]+$)(?![0-9\W_]+$)[a-zA-Z0-9\W_]{8,18}$/,
norm_sex : 1,
norm_hob : '[2,4]',
norm_color : /\S+/
};
//邮箱校验
eles.umail.on('change',function(){
eles.umail.validator( eles.norm_mail, eles.err1, eles.errTxt1 );
});
//密码校验
eles.upwd.on('change',function(){
eles.upwd.validator( eles.norm_pwd, eles.err2, eles.errTxt2 );
});
//确认密码校验
eles.urepwd.on('change',function(){
eles.urepwd.validator( eles.upwd.val(), eles.err3, eles.errTxt3 );
});
//性别校验
eles.usex.on('change',function(){
eles.usex.validator( eles.norm_sex, eles.err4, eles.errTxt4 );
});
//爱好校验
eles.uhob.on('change',function(){
eles.uhob.validator( eles.norm_hob, eles.err5, eles.errTxt5 );
});
//颜色校验
eles.ucolor.on('change',function(){
eles.ucolor.validator( eles.norm_color, eles.err6, eles.errTxt6 );
});
//提交
eles.submit.on('click',function(){
if(
eles.umail.validator( eles.norm_mail, eles.err1, eles.errTxt1 ) &&
eles.upwd.validator( eles.norm_pwd, eles.err2, eles.errTxt2 ) &&
eles.urepwd.validator( eles.upwd.val(), eles.err3, eles.errTxt3 ) &&
eles.usex.validator( eles.norm_sex, eles.err4, eles.errTxt4 ) &&
eles.uhob.validator( eles.norm_hob, eles.err5, eles.errTxt5 ) &&
eles.ucolor.validator( eles.norm_color, eles.err6, eles.errTxt6 )
) {
eles.form.submit();
}
});
</script>
系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791