注册表单验证

来源：互联网发布：a计划软件编辑：程序博客网时间：2024/04/29 12:56

写的过程中主要遇到以下几个坑：

1.checkForm不知道为什么必须写在内部JS里，当我将其写在外部JS的时候，不管是返回false还是true表单一样能提交（笔迹里JS和HTML都写在一个页面，看不出来这个坑，有兴趣的同学自己试试，找到解决办法请告之，反正我现在还没办法,MMP）
2.验证码必须用parseInt转换一下字符类型才能判断,哦，对了，这里验证码我给了固定值“1234”，方便判断
3.在判断"checkbox"是否有checked属性时，必须用prop判断，而不能用attr，听说是JQ版本的问题

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<title>表单验证</title>
<style type="text/css">
*{
margin: 0;padding: 0;
}
.register {
width: 333px;
height: 500px;
margin-top: 110px;
padding: 0 100px;
background-color: white;
}

.register h1 {
font-family: simhei;
font-size: 26px;
color: #198EEE;
margin: 30px 0 0;
}

.register>input {
width: 100%;
height: 40px;
border: 1px solid #198EEE;
text-indent: 20px;
margin: 10px 0 0;
font-family: sans-serif;
font-size: 16px;
border-radius: 3px;
}

.register>p {
display: block;
height: 20px;
color: red;
}

.register>div:nth-child(4) {
margin-top: 10px;
display: flex;
display: -webkit-flex;
display: -ms-flexbox;
align-items: center;
-ms-flex-item-align: center;
-webkit-align-items: center;
}

.register>div:nth-child(4) input {
width: 120px;
height: 40px;
padding: 0 20px;
border: 1px solid #198EEE;
font-family: sans-serif;
font-size: 16px;
margin-right: 115px;
border-radius: 3px;
}

.register>div:nth-child(4) button {
width: 100px;
height: 42px;
background-color: #198EEE;
color: white;
font-family: sans-serif;
font-size: 16px;
border-radius: 3px;
}

.register>div:nth-child(10) {
display: flex;
display: -webkit-flex;
display: -ms-flexbox;
align-items: center;
-ms-flex-item-align: center;
-webkit-align-items: center;
margin-top: 10px;
}

.register>div:nth-child(10) input {
margin-right: 10px;
}

.register>div:nth-child(10) a {
color: #198EEE;
}

.register>input:nth-child(11) {
background-color: #198EEE;
font-size: 22px;
color: white;
font-family: simhei;
}

.register>div:last-child {
margin-top: 10px;
}

.register>div:last-child a {
color: #198EEE;
}
</style>

</head>

<body>
<form action="#" method="get" onsubmit="return checkForm()">
<div class="register">
<h1>注册</h1>
<input type="tel" name="" id="phoneNumber" value="" placeholder="手机号" />
<p></p>

<div>
<input type="text" name="" id="ver-Code" value="" placeholder="验证码" />
<button>获取验证码</button>
</div>
<p>

</p>

<input type="password" name="" id="pwd-first" value="" placeholder="请输入密码（6-16位字符）" />
<p></p>

<input type="password" name="" id="pwd-second" value="" placeholder="确认密码" />
<p></p>

<div class="">
<input type="checkbox" id="checkClause" />
<p>我已接受
<a href="#">服务条款</a>
</p>
</div>

<input type="submit" id="register" value="立&nbsp即&nbsp注&nbsp册" />

<div>已注册？
<a href="#" id="to-loginBox">立即登录</a>
</div>
</div>
</form>

<script type="text/javascript">
var phoneNumberZ = $("#phoneNumber").val(); /*--手机号--*/
// var verCodeZ = parseInt($("#ver-Code").val()); /*--验证码--*/

var pwdFristZ = $("#pwd-first").val(); /*--第一次输入的密码--*/
var pwdSecondZ = $("#pwd-second").val(); /*--第二次输入的密码--*/

/*---------手机号验证正则---------*/
var regPhone = /^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/;
/*--密码验证正则--*/
var regPwdF = /^[a-z0-9_-]{6,16}$/;

/*--手机号判断--*/
function checkPhone() {
/*--手机号输入框获得焦点时--*/
$("#phoneNumber").focus(function() {
$(this).next().html("");
})

/*--手机号输入框失去焦点时--*/
$("#phoneNumber").blur(function() {
let phoneNumber = $("#phoneNumber").val();
if(regPhone.test(phoneNumber)) {
$(this).next().html("");
phoneNumberZ = phoneNumber;
} else {
$(this).next().html("*手机号输入错误");
}
// console.log("手机号:"+phoneNumberZ);
})
}
checkPhone();

/*--验证码判断--*/
function checkCode() {
/*--验证码输入框获得焦点时--*/
$("#ver-Code").focus(function() {
$(this).parent().next().html("");
})

/*--验证码输入框失去焦点时--*/
$("#ver-Code").blur(function() {
let verCode = $("#ver-Code").val();
if(verCode == "") {
$(this).parent().next().html("*请输入验证码");
}
// console.log(verCodeZ);
})
}
checkCode();

/*--第一次输入密码判断--*/
function checkPwdF() {
/*--密码输入框获得焦点时--*/
$("#pwd-first").focus(function() {
$(this).next().html("");
})

/*--密码输入框失去焦点时--*/
$("#pwd-first").blur(function() {
let pwdFrist = $("#pwd-first").val();
if(regPwdF.test(pwdFrist)) {
$(this).next().html("");
pwdFristZ = pwdFrist;
} else {
$(this).next().html("*密码不符合规范");
}
// console.log("第一次输入密码:"+pwdFrist);
})
}
checkPwdF();

/*--第二次输入密码判断--*/
function checkPwdS() {
/*--密码框获得焦点时--*/
$("#pwd-second").focus(function() {
$(this).next().html("");
})

/*--密码框失去焦点时--*/
$("#pwd-second").blur(function() {
let pwdSecond = $("#pwd-second").val();
if(pwdFristZ === pwdSecond) {
$(this).next().html("");
pwdSecondZ = pwdSecond;
} else {
$(this).next().html("*两次密码输入不一致");
}
})
}
checkPwdS();

/*--表单提交验证--*/

function checkForm() {
var verCodeZ = parseInt($("#ver-Code").val()); /*--验证码--*/

if(!regPhone.test(phoneNumberZ)) {
$("#phoneNumber").next().html("*手机号输入错误");
return false;
} else if(verCodeZ !== 1234) {
$("#ver-Code").parent().next().html("*验证码错误");
return false;
} else if(!regPwdF.test(pwdFristZ)) {
$("#pwd-first").next().html("*密码不符合规范");
return false;
console.log(regPwdS);
} else if(pwdFristZ !== pwdSecondZ) {
$("#pwd-second").next().html("*两次密码输入不一致");
return false;
} else if(!$("#checkClause").prop("checked")) {
alert("您还未接受条款内容");
return false;
}
/*以上所有条件成立时注册成功*/
alert("注册成功！！！！！！！！！哈哈哈，现在你是我的人啦*_*");
return true;
}
</script>
</body>

</html>

WEB前端学习交流群21 598399936

阅读全文

0 0