基于jquery
html部分
<span class="dz-intro"><sup>*</sup>QQ:</span>
<input type="number" name="qq" data-minlength="5" data-maxlength="11" data-error="qq格式不正确">
<span class="dz-title"></span>
js部分
$(function () {
$("input").blur(function () {
var minlength=$(this).attr('data-minlength')
var maxlength=$(this).attr('data-maxlength')
var error=$(this).attr('data-error')
check($(this),minlength,maxlength,error)
})
//密码 验证安全等级 一个任意字符 pw-weak 数字+字母+6个 pw-medium 数字+字母+特殊符号+大写+8位 pw-strong
$("input[name='password']").on('input',function () {
var type=0;
var password=$(this).val()
var hasxiaoxie= /[a-z]+/; //小写字母
var hasdaxie= /[A-Z]+/; //大写字母
var hasnumber= /[0-9]*/; //数字
var regEn = /[`~!@#$%^&*()_+<>?:"{},.\/;'[\]]/im,
regCn = /[·！#￥（——）：；“”‘、，|《。》？、【】[\]]/im;
if (hasxiaoxie.test(password)){
type++
}
if (hasdaxie.test(password)){
type++
}
if (hasnumber.test(password)){
type++
}
if (regEn.test(password)||regCn.test(password)){
type++
}
if(type==0){$('.pw-strength').attr('class','pw-strength');return}
if(type==1){$('.pw-strength').attr('class','pw-strength pw-weak');return}
if(type==2||type==3){
if(password.length>=6){
$('.pw-strength').attr('class','pw-strength pw-medium');return
}else{
$('.pw-strength').attr('class','pw-strength pw-weak');return
}
}
if(type==4){
if(password.length>=8){
$('.pw-strength').attr('class','pw-strength pw-strong');return
}else{
$('.pw-strength').attr('class','pw-strength pw-medium');return
}
}
})
$('input').focus(function (e) {
$(this).removeClass('error')
$(this).next().removeClass('error')
var error=$(this).attr('data-error')
if(error){$(this).next().html('')}
})
})
//input对象 最小长度 最大长度 错误提示
function check(obj,minlength,maxlength,error) {
var value=obj.val()
if(value.length<minlength||value.length>maxlength){
obj.addClass('error')
obj.next().addClass('error')
if(error){obj.next().html(error)}
}
}
