简单的用户名密码表单校验
一款简单的用户名密码校验代码，看了某网的视频后就写了简单的校验；
本表单校验规则：
用户名：1、必填项；
2、可以中英文混合；
3、5-25个字符，一个中文字为两个字符；
密码 ： 1、必填项；
2、5-16个字符，使用字母数字或符号组合的密码；
3、不能全为数字，也不能全为字母，不能用相同字符；
4、密码强度的校验；
重复密码：当然只能和密码一致啦！
全部校验OK才可以提交；
如复制代码注意本代码引用的jquery.js是本地的哦；
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单提交title>
<script type="text/javascript" src="js/jquery-1.7.2.js">script>
<style type="text/css">
*{ margin: 0; padding: 0;font-family: 'microsoft yahei';}
i{font-style: normal;}
ul,li,dl,ol{list-style: none;}
.clear:after { clear: both;}
.clear:before, .clear:after {
content: " ";
display: table;
height: 0;
visibility: hidden;
font-size: 0;
}
.field {
padding: 9px 0 9px 160px;
}
.field-bd {
position: relative;
}
.field-tit {
width: 160px;
height: 35px;
font-size: 14px;
color: #666;
line-height: 35px;
float: left;
margin-left: -170px;
text-align: right;
}
.txt {
width: 170px;
border: 1px solid #ddd;
height: 18px;
line-height: 18px;
padding: 8px 4px;
background-color: #fff;
outline: none;
}
.txt:focus{
border-color: #31c567;
}
.txt:disabled,
button:disabled{
background: #f5f5f5;
}
.form-error,
.form-info{
display:none;
font-size: 14px;
color: #666;
}
.pwd-status{
margin-top: 5px;
overflow: hidden;
}
.pwd-status span{
float: left;
width: 60px;
height: 20px;
text-align: center;
color: #fff;
font-size: 12px;
line-height: 20px;
background: #b1e9c6;
}
.pwd-status .active{
background: #31c469;
}
.submit{
height: 34px;
line-height: 34px;
padding: 0 25px;
font-size: 14px;
border: 1px solid #fff;
color: white;
background-color: #31c567;
cursor: pointer
}
style>
head>
<body>
<form action class="form" id="form">
<ul class="fieldset">
<li class="field">
<label for="userName" class="field-tit">用户名label>
<div class="field-bd">
<input class="txt" type="text" name="userName" id="userName" placeholder="" value="" autoComplete="off">
<span class="form-info">span>
div>
<p class="form-error">p>
li>
<li class="field">
<label for="passWord" class="field-tit">密码label>
<div class="field-bd">
<input class="txt" type="password" name="passWord" id="passWord" placeholder="" value="">
<span class="form-info">span>
div>
<div class="pwd-status">
<span class="active">弱span>
<span class="js-stat-m">中span>
<span class="js-stat-s">强span>
div>
li>
<li class="field">
<label for="passWord" class="field-tit">确认密码label>
<div class="field-bd">
<input class="txt" type="password" name="repassWord" id="repassWord" disabled placeholder="" value="">
<span class="form-info">请再输入一次span>
div>
li>
<li class="field">
<div class="field-bd">
<button type="submit" class="submit" disabled>点击提交button>
div>
li>
ul>
form>
<script type="text/javascript">
$(function(){
//判断汉字是双字符的方法
var getLength = function(str){
return str.replace(/[^\x00-xff]/g,'xx').length;
};
//重复字符方法
var findStr = function(str,n){
var tmp = 0;
for(var i = 0;iif (str.charAt(i) == n){
tmp++
}
}
return tmp;
}
var userName = $('input[name=userName]');
var pwd = $('input[name=passWord]');
var rePwd = $('input[name=repassWord]');
var pwdStatMiddle = $('.js-stat-m');
var pwdStatStrong = $('.js-stat-s');
var nameLength = 0;
var userNameState = false,pwdState = false,repwdState = false;
//用户名获取焦点时触发事件
userName.on('focus',function(){
var $this = $(this).closest('li').find('.form-info');
$this.text('5-25个字符，一个汉字为两个字符，推荐使用中文会员名。').show();
})
//用户名键盘弹起时触发事件
userName.on('keyup',function(){
//计算用户名长度，汉字为2个字符
nameLength = getLength($(this).val());
$(this).closest('li').find('.form-error').text(nameLength + '个字符').show();
if(nameLength == '0'){
$(this).closest('li').find('.form-error').hide();
}
})
//用户名失去焦点时触发事件
userName.on('blur',function(){
var $this = $(this).closest('li').find('.form-info');
var reg = /[^\w\u4e00-\u9fa5]+/; //正则\w数字字母 后面的是汉字
if(reg.test($(this).val())){
$this.text('含有非法字符').show();
userNameState = false;
}else if($(this).val() == ''){
$this.text('不能为空').show();
userNameState = false;
}else if(nameLength > 25){
$this.text('不能大于25个字符').show();
userNameState = false;
}else if(nameLength < 6){
$this.text('不能少于6个字符').show();
userNameState = false;
}else{
$this.text('OK').show();
userNameState = true;
}
});
//密码
pwd.on('focus',function(){
var $this = $(this).closest('li').find('.form-info');
$this.text('5-16个字符，请使用字母数字或符号组合的密码').show();
})
pwd.on('keyup',function(){
//密码大于5之后 密码强度显示中 同时释放下面密码框禁输状态
if($(this).val().length > 5 ){
pwdStatMiddle.addClass('active');
rePwd.removeAttr('disabled');
rePwd.closest('li').find('.form-info').show();
}else{
pwdStatMiddle.removeClass('active');
rePwd.attr('disabled','true');
rePwd.closest('li').find('.form-info').hide();
}
if($(this).val().length > 10 ){
pwdStatStrong.addClass('active');
}else{
pwdStatStrong.removeClass('active');
}
checkform()
});
pwd.on('blur',function(){
var $this = $(this).closest('li').find('.form-info');
var m = findStr(pwd.val(),pwd.val()[0]); //重复密码方法校验，传参把值传给m
var regN = /[^\d]+/; //非数字
var regT = /[^a-zA-Z]+/; //非字母
//不能为空
if($(this).val() == ''){
$this.text('不能为空').show();
pwdState = false;
}
//不能用相同字符
else if(m == $(this).val().length){
$this.text('不能用相同字符').show();
pwdState = false;
}
//长度应为6-16个字符
else if($(this).val().length < 6 || $(this).val().length > 16){
$this.text('长度应为6-16个字符').show();
pwdState = false;
}
//不能全为数字
else if(!regN.test($(this).val())){
$this.text('不能全为数字').show();
pwdState = false;
}
//不能全为字母
else if(!regT.test($(this).val())){
$this.text('不能全为字母').show();
pwdState = false;
}
//ok
else{
$this.text('OK').show();
pwdState = true;
}
checkform()
})
//重复密码
rePwd.on('blur',function(){
var $this = $(this).closest('li').find('.form-info');
if($(this).val() !== pwd.val()){
$this.text('两次输入的密码不一致').show();
repwdState = false;
}else{
$this.text('OK').show();
repwdState = true;
}
checkform()
})
function checkform() {
if (userNameState && pwdState && repwdState) {
$('.submit').removeAttr("disabled");
} else {
$('.submit').attr("disabled");
}
}
});
script>
body>
html>