为什么写的两段验证确认密码的代码都一样，但第二个一直报错，为什么
//博客园注册页面
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>博客园注册页面</title>
<style type="text/css">
table{
margin: 0 auto;
}
</style>
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<script>
$(document).ready(function(){
//表单单击事件
$("#submit").click(function(){
var names=document.getElementById("name");//获取用户名
if(names.validity.valueMissing==true){
names.setCustomValidity("用户名不能为空");
}
else if(names.validity.patternMismatch==true){
names.setCustomValidity("用户名必须以英文开头4-16个英文字母或数字");
}
else{
names.setCustomValidity("");
}
var pwd=document.getElementById("pwd");//获取密码
if(pwd.validity.valueMissing==true){
pwd.setCustomValidity("密码不能为空");
}
else if(pwd.validity.patternMismatch==true){
pwd.setCustomValidity("密码必须4-10个英文字母或数字");
}
else{
pwd.setCustomValidity("");
}
var quepas=document.getElementById("quepwd");//确认密码
if(!quepas.equals(pwd)){
quepas.setCustomValidity("两次输入的密码不一致");
}
var email=document.getElementById("email");//获取邮箱
if(email.validity.valueMissing==true){
email.setCustomValidity("邮箱不能为空");
}
else if(email.validity.patternMismatch==true){
email.setCustomValidity("邮箱格式不正确");
}
else{
email.setCustomValidity("");
}
var phone=document.getElementById("phone");//获取手机号
if(phone.validity.valueMissing==true){
phone.setCustomValidity("手机号不能为空");
}
else if(phone.validity.patternMismatch==true){
phone.setCustomValidity("手机号只能是1开头的11位数字");
}
else{
phone.setCustomValidity("");
}
var bith=document.getElementById("bith");//获取生日
if(bith.validity.valueMissing==true){
bith.setCustomValidity("生日不能为空");
}
else if(bith.validity.patternMismatch==true){
bith.setCustomValidity("生日的年份为1900~2016，格式为1980-5-12或1988-02-04");
}
else{
bith.setCustomValidity("");
}
});
});
</script>
</head>
<body>
<h2>博客园</h2>
<h4>新用户注册</h4><hr />
<form action="" method="post">
<table>
<tr>
<td>用户名：</td><td><input placeholder="以英文开头4-16个英文字母或数字" required="" style="width: 200px;"
pattern="[a-zA-Z][a-zA-Z0-9]{3,15}" id="name"/></td>
</tr>
<tr>
<td>密码：</td><td><input type="password" placeholder="4-10个英文字母或数字" required="" style="width: 200px;"
pattern="[a-zA-Z0-9]{4,10}" id="pwd"/></td>
</tr>
<tr>
<td>确认密码：</td><td><input type="password" placeholder="" required="" style="width: 200px;" id="quepwd"/></td>
</tr>
<tr>
<td>电子邮箱：</td><td><input placeholder="" required="" style="width: 200px;"
pattern="\w+@\w+(\.[a-zA-Z]{2,3}){1,2}" id="email"/></td>
</tr>
<tr>
<td>手机号：</td><td><input placeholder="" required="" style="width: 200px;"
pattern="1\d{10}" id="phone"/></td>
</tr>
<tr>
<td>生日：</td><td><input placeholder="" required="" style="width: 200px;"
pattern="((19\d{2})|(201\d))-(0?[1-9]|1[0-2])-(0?[1-9]|[1-2]\d|3[0-1])" id="bith"/></td>
</tr>
<tr>
<td colspan="2" align="center"><input type="submit" id="submit"/></td>
</tr>
</table>
</form>
</body>
</html>
//
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>百度注册页面</title>
<style type="text/css">
.reg-inpiut {
margin-top: 20px;
}
.input-label {
display: inline-block;
text-align: right;
width: 100px;
}
.reg-inpiut {
height: 30px;
line-height: 30px;
}
.reg-inpiut i {
color: #f00;
vertical-align: middle;
padding-right: 5px;
}
#tel-tip {
font-size: 12px;
color: #f00;
}
</style>
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(function(){
$("#submit").click(function(){
var uname=document.getElementById("uname");
var names=document.getElementById("names");
if(uname.validity.valueMissing==true){
//uname.setCustomValidity("用户名不能为空");
names.innerHTML="用户名不能为空";
}else if(uname.validity.patternMismatch==true){
//uname.setCustomValidity("英文，数字长度为4-12个字符");
names.innerHTML="英文，数字长度为4-12个字符";
}else{
//uname.setCustomValidity("");
names.innerHTML="ok";
}
var pwd=document.getElementById("pwd");//获取密码
var pwds=document.getElementById("pwds");
if(pwd.validity.valueMissing==true){
//pwd.setCustomValidity("密码不能为空");
pwds.innerHTML="密码不能为空";
}
else if(pwd.validity.patternMismatch==true){
//pwd.setCustomValidity("密码必须4-10个英文字母或数字");
pwds.innerHTML="密码必须4-10个英文字母或数字";
}
else{
//pwd.setCustomValidity("");
pwds.innerHTML="";
}
var quepas=document.getElementById("quepwdsss");//确认密码 （//这里总是无缘无故报错，我刚开始的时候是对的，但后来就不行了）
if(!quepas.equals(pwd)){
quepas.setCustomValidity("两次输入的密码不一致");
}
var email=document.getElementById("email");//电子邮件
var emsil=document.getElementById("emsil");
if(email.validity.valueMissing==true){
//email.setCustomValidity("邮箱不能为空");
emsil.innerHTML="邮箱不能为空";
}
else if(email.validity.patternMismatch==true){
//email.setCustomValidity("邮箱格式必须包含“@”和“.");
emsil.innerHTML="邮箱格式必须包含“@”和“.”";
}
else{
//email.setCustomValidity("");
emsil.innerHTML="";
}
var bith=document.getElementById("both");//获取生日
if(bith.validity.valueMissing==true){
bith.setCustomValidity("生日不能为空");
}
else if(bith.validity.patternMismatch==true){
bith.setCustomValidity("生日的年份为1900~2016，格式为1980-5-12或1988-02-04");
}
else{
bith.setCustomValidity("");
}
});
});
</script>
</head>
<body>
<h3>用户注册</h3>
<form action="" method="post">
<div class="reg-inpiut">
<label class="input-label"><i>*</i>用户名：</label>
<input type="text" id="uname" placeholder="英文，数字长度为4-12个字符" style="width: 200px;" required
pattern="\w{4,12}"/>
<span id="names"></span>
</div>
<div class="reg-inpiut">
<label class="input-label"><i>*</i>密码：</label>
<input type="password" id="pwd" placeholder="英文，数字长度为6-12个字符" style="width: 200px;" required
pattern="[a-z-A-Z0-9]{6,12}"/>
<span id="pwds"></span>
</div>
<div class="reg-inpiut">
<label class="input-label"><i>*</i>确认密码：</label>
<input type="password" id="quepwdsss" placeholder="" style="width: 200px;" required/>
<span id="quepwds"></span>
</div>
<div class="reg-inpiut">
<label class="input-label"><i>*</i>性别：</label>
<input type="radio" name="sex" checked="checked"/>男
<input type="radio" name="sex" />女
<span>请选择性别</span>
</div>
<div class="reg-inpiut">
<label class="input-label"><i>*</i>电子邮件：</label>
<input type="text" id="email" placeholder="" style="width: 200px;" required
pattern="\w+@\w+(\.[a-zA-Z]{2,3}){1,2}"/>
<span id="emsil"></span>
</div>
<div class="reg-inpiut">
<label class="input-label"><i>*</i>出生日期：</label>
<input type="text" id="both" placeholder="" style="width: 200px;" required
pattern="((19\d{2})|(201\d))-(0?[1-9]|1[0-2])-(0?[1-9]|[1-2]\d|3[0-1])"/>
<span id="btith"></span>
</div>
<div class="reg-inpiut">
<input type="submit" id="submit" value="注册" style="margin-left: 100px;"/>
<input type="reset" value="清除" />
</div>
</form>
</body>
</html>
qq_Dreamy_旧城_01回答
-
慕仔9549291
我认为一个复杂的交互页面，需要有很多的js或者jquery代码，放在外面一是让代码更简洁，规范，另外也是更好的分类管理运用
随时随地看视频慕课网APP
相关分类
JQuery