正则表单验证 | 易学教程

<!DOCTYPE html>

<html>

<head>

<title> New Document </title>

</head>

<body>

<tr>

<td colspan="2" align="center">用户名注册</td>

</tr>

<tr>

<label>

</label>

</td>

</tr>

<tr>

<label>

<input type="radio" name="sex" id="b" />男

<input type="radio" name="sex" id="g" />女

</label>

</td>

</tr>

<tr>

</label></td>

</tr>

<tr>

</label></td>

</tr>

<tr>

</label><span id=s5></span></td>

</tr>

<tr>

</label></td>

</tr>

<tr>

</label></td>

</tr>

<tr>

</label></td>

</tr>

<tr>

</label></td>

</tr>

<tr>

</label></td>

</tr>

<tr>

</label><span id="s111"></span></td>

</tr>

<tr>

足球

篮球

排球

网球

</label><span id="s13"></span></td>

</tr>

<tr>

</label></td>

</tr>

</table>

</form>

</body>

</html>

要求：

1、使用失去焦点事件完成表单验证每一项验证失去焦点时都可以即时验证

2、姓名：单词字符组成 6--10为，不能用数字开头

年龄：只能由数字组成年龄不能为负数

密码：6--18位字符组成有密码强弱验证

3、确认密码和密码相同

4、手机号： 15 13 18 开头

5、qq ： 5--12位数字第一位不能是数字

6、邮箱：必须有@符号

7、邮编：6为数字

8、身份证： 18位最后一位考虑有x

9、验证码

输入的验证码必须和红色框中的相同，点击看不清可以实现验证码的切换

验证码由字母数字组成

10、爱好和性别必选

* */

var oForm = document.querySelector("form");

oForm.onsubmit = function(){

if( flagName && checkSex() && flagAge && flagPwd && flagQpwd && flagTel && flagQQ && flagEmail && flagEml && checkHobby() && flagSname && flagSyz ){

return true;

}else{

return false;

}

//用户名验证

$id("name").onblur = function(){

var flagName = null;

var strName = $id("name").value;

var reg = /^[^\d][a-zA-Z\d_]{5,9}$/;

if( reg.test( strName ) ){

flagName = true;

$id("s1").innerHTML = "正确"

}else{

flagName = false;

$id("s1").innerHTML = "字符组成 6--10为，不能用数字开头"

}

//性别

function checkSex(){

if( $id("b").checked || $id("g").checked ){

return true;

}else{

$id("s2").innerHTML = "必选一项";

return false;

}

//年龄验证

$id("age").onblur = function(){

var flagAge = null;

var strAge = $id("age").value;

var reg = /^\d$/;

if( reg.test( strAge ) ){

flagAge = true;

$id("s3").innerHTML = "正确"

}else{

flagAge = false;

$id("s3").innerHTML = "只能由数字组成年龄不能为负数"

}

//密码验证

$id("pwd").onblur = function(){

var flagPwd = null;

var strPwd = $id("pwd").value;

//纯数字字母特殊符号

var regNum = /^\d+$/;

var regLetter = /^[a-z]+$/i;

var regChar = /^[^0-9a-z]+$/i;

//包含数字字母特殊符号

var _regNum = /\d+/;

var _regLetter = /[a-z]+/i;

var _regChar = /[^0-9a-z]+/i;

if( strPwd.length < 6 || strPwd.length > 18 ){

return;

}

if( regNum.test(strPwd)||regLetter.test(strPwd)||regChar.test(strPwd) ){

//弱

$id("s4").innerHTML = "密码较弱";

}else if( _regNum.test(strPwd)&&_regLetter.test(strPwd)&&_regChar.test(strPwd) ){

//强

$id("s4").innerHTML = "密码较强";

}else{

//中

$id("s4").innerHTML = "密码不强不弱";

}

//确认密码验证

var flagQpwd = null;

$id("qpwd").onblur = function(){

var strPwd = $id("pwd").value;

var strQpwd = $id("qpwd").value;

if( strQpwd != "" ){

if( strPwd == strQpwd ){

flagQpwd = true;

$id("s5").innerHTML = "正确";

}else{

flagQpwd = false;

$id("s5").innerHTML = "两次密码不一致";

}

//手机验证

var flagTel = null;

$id("tel").onblur = function(){

var strTel = $id("tel").value;

var reg = /^1[358]\d{9}$/;//手机号

if( reg.test( strTel ) ){

//正确

flagTel = true;

$id("s6").innerHTML = "正确";

}else{

//错误

flagTel = false;

$id("s6").innerHTML = "手机号： 15 13 18 开头";

}

//QQ号验证

var flagQQ = null;

$id("qq").onblur = function(){

var strQQ = $id("qq").value;

var reg = /^[^0]\d{4,11}$/;

if( reg.test( strQQ ) ){

flagQQ = true;

$id("s7").innerHTML = "正确";

}else{

flagQQ = false;

$id("s7").innerHTML = "5--12位数字第一位不能是0";

}

//邮箱验证

var flagEmail = null;

$id("email").onblur = function(){

var strEmail = $id("email").value;

var reg = /^\w+@\w+(\.\w+)+$/;

if( reg.test( strEmail ) ){

flag = true;

$id("s8").innerHTML = "正确";

}else{

flag = false;

$id("s8").innerHTML = "必须有@符号";

}

//验证邮编

var flagEml = null;

$id("eml").onblur = function(){

var strEml = $id("eml").value;

var reg =/^\d{6}$/;

if( reg.test( strEml ) ){

flag = true;

$id("s9").innerHTML = "正确";

}else{

flag = false;

$id("s9").innerHTML = "只能是6为数字";

}

//身份证验证

var flagSname = null;

$id("sname").onblur = function(){

var strSname = $id("sname").value;

var reg =/^[1-9]\d{16}(\d|x)$/;

if( reg.test( strSname )){

flag = true;

$id("s10").innerHTML = "正确";

}else{

flag = false;

$id("s10").innerHTML = "只能是18位数字，最后一位可以是x";

}

//验证码刷新

function yzm(){

var str = "";

for(var i= 1;i<=6;i++){

var code = rand(48,122);

if(code>=58&&code<=64 || code>=91&&code<=96){

i--;

}else{

str += String.fromCharCode(code);

}

return str;

}

$id("yz").innerHTML = yzm();

$id("btn").onclick = function(){

$id("yz").innerHTML = yzm();

}

//验证码验证

var flagYz = null;

$id("y").onblur = function(){

var str = this.value;

var strOld = $id("yz").innerHTML;

if(str == strOld){

$id("s111").innerHTML = "ok";

flagYz = true;

}else{

$id("s111").innerHTML = "erro"

flagYz = false;

}

//爱好验证

function checkHobby(){

//统计被选中的复选框的个数大于等于2 返回true

var count = 0;

var hs = document.getElementsByName("a");

for( var i = 0 ; i < hs.length ; i++ ){

if( hs[i].checked ){

count++;

}

if( count >= 2 ){

flag = true;

}else if( count < 2 ){

flag = false;

$id("s13").innerHTML = "至少选择两项";

}

</script>

来源：https://www.cnblogs.com/tis100204/p/10328835.html

标签

表单验证

正则

html表单