JS登录表单验证 正则验证

来源:互联网 发布:钢雨篷荷载计算软件 编辑:程序博客网 时间:2024/06/05 02:16

使用js进行表单验证。验证字段及标准如下:

1. 用户名:6-12位字母数字下划线组合

2. 密码:6-12位字母数字下划线组合

3. 两次密码一致

4. 判断密码强弱并提示

5. 邮箱:必须存在@符号

form表单

<form action="" name="form" method="post" onsubmit="return checkForm()">

<table>

<tr>

   <td>用户名</td>

    <td><input type="text" name="name" /></td>

    </tr>

    <tr>

    <td>密码</td>

    <td><input type="password" name="pwd" onkeyup="checkPwd()" /><span id="sp"></span></td>

    </tr>

    <tr>

    <td>密码确认</td>

    <td><input type="password" name="repwd" /></td>

    </tr>

    <tr>

    <td>邮箱</td>

    <td><input type="text" name="email" /></td>

    </tr>

    <tr>

    <td colspan="2"><input type="submit" /></td>

    </tr>

</table>

</form>

 

验证js:

function checkForm(){

var name = document.form.name.value;

var e = /^\w{6,12}$/;

if(!e.test(name)){

alert('用户名必须是6-12位字母数字下划线');

return false;

}

var pwd = document.form.pwd.value;

var ee = /^\w{6,30}$/;

if(!ee.test(pwd)){

alert('密码必须是6-30位字母数字下划线');

return false;

}

var re_pwd = document.form.repwd.value

if(pwd != re_pwd){

alert('两次密码不一致');

return false;

}

var e_mail = document.form.email.value;

var e1 = /^\w{1,}@\w{1,}.[a-zA-Z]{2,3}$/;

if(!e1.test(e_mail)){

alert('邮箱格式不正确');

return false;

}

}

 

function checkPwd(){

var sp = document.getElementById('sp');

var pwd = document.form.pwd.value;

var b = /^\w{6,30}$/;

var char_lower = /^[a-z]{6,}$/;

var char_upper = /^[A-Z]{6,}$/;

var num = /^[0-9]{6,}$/;

var mid = /^\w{6,12}$/;

 

if(!b.test(pwd)){

sp.innerHTML = '不符合规则';

sp.style.color = 'red';

} else if(char_lower.test(pwd) || char_upper.test(pwd) || num.test(pwd)){

sp.innerHTML = '弱';

sp.style.color = 'red';

} else if(mid.test(pwd)){

sp.innerHTML = '中';

sp.style.color = 'yellow';

} else {

sp.innerHTML = '强';

sp.style.color = 'green';

}

}


原创粉丝点击