正则表单验证
发布时间：2020-12-14 06:10:14 所属栏目：百科 来源：网络整理
导读：!DOCTYPE html html head title New Document /title meta name="Generator" content="EditPlus" meta name="Author" content="" meta name="Keywords" content="" meta name="Description" content="" /head ? body form action="" ??table width="449" hei
|
<!DOCTYPE html>
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
</head>
?
<body>
<form action="" >
??<table width="449" height="530" border="1" align=‘center‘>
?? <tr>
????<td colspan="2" align="center">用户名注册</td>
????</tr>
?? <tr>
????<td width="116" align="right">姓名：</td>
????<td width="323">
??????<label>
?????? <input type="text" name="" id="name" /><span id="s1"></span>
??????</label>
????</td>
?? </tr>
?? <tr>
????<td width="116" align="right">性别：</td>
????<td width="323">
??????<label>
?????? <input type="radio" name="sex" id="b" />男
?????? <input type="radio" name="sex" id="g" />女
?????? <span id="s2"></span>
??????</label>
????</td>
?? </tr>
?? <tr>
????<td align="right">年龄：</td>
????<td><label>
???? <input type="text" name="" id="age" /><span id="s3"></span>
????</label></td>
?? </tr>
?? <tr>
????<td align="right">密码：</td>
????<td><label>
???? <input type="password" name="" id="pwd" /><span id="s4"></span>
????</label></td>
?? </tr>
?? <tr>
????<td align="right">确认密码：</td>
????<td><label>
???? <input type="password" name="" id="qpwd" />
????</label><span id=s5></span></td>
?? </tr>
?? <tr>
????<td align="right">手机：</td>
????<td><label>
???? <input type="text" name="" id="tel" /><span id="s6"></span>
????</label></td>
?? </tr>
?? <tr>
????<td align="right">QQ:</td>
????<td><label>
???? <input type="text" name="" id="qq" /><span id="s7"></span>
????</label></td>
?? </tr>
?? <tr>
????<td align="right">邮箱：</td>
????<td><label>
???? <input type="text" name="" id="email" /><span id="s8"></span>
????</label></td>
?? </tr>
?? <tr>
????<td align="right">邮编：</td>
????<td><label>
???? <input type="text" name="" id="eml" /><span id="s9"></span>
????</label></td>
?? </tr>
?? <tr>
????<td align="right">身份证：</td>
????<td><label>
???? <input type="text" name="" id="sname" /><span id="s10"></span>
????</label></td>
?? </tr>
?? <tr>
????<td align="right">验证码：</td>
????<td><label>
???? <input type="text" id="y"/>
???? <span style="width:80px;height: 20px;border: 1px solid red;background: url(1.png) -10px -15px;display: inline-block;" id="yz"></span>
???? <a href="#" id="btn">看不清</a>
????</label><span id="s111"></span></td>
?? </tr>
????<tr>
????<td align="right">爱好：</td>
????<td><label>
????<input type="checkbox" name="a" id="c1">
????足球
????<input type="checkbox" name="a" id="c2">
????篮球
????<input type="checkbox" name="a" id="c3">
????排球
????<input type="checkbox" name="a" id="c4">
????网球
????
????</label><span id="s13"></span></td>
?? </tr>
?? <tr>
????<td height="36" colspan="2" align="center"><label>
???? <input type="submit" value="注册" />
????</label></td>
????</tr>
??</table>
</form>
</body>
</html>
<script src="../../二阶段案例/public.js"></script>
<script type="text/javascript">
??/*
?? 要求：
?? ?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-Zd_]{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 = /^
[email?protected]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>
（编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |