js实现简单的注册表验证

原创 彭淇  2017-07-18 15:21:17  阅读 2200 次 评论 0 条

js实现简单的注册表验证,效果如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>注册表</title>
<style type="text/css">
table{
border: 1px solid red;
width: 500px;
height: 100px;
}
td{
border: 1px solid blue;
width: 150px;
height: 30px;
text-align: center;
background-color: pink;
}
</style>
</head>
<body>
<table>
<tr>
<td>用户名:</td>
<td><input  type="text"  name="yhm" id="yhm"></input></td>
<td>4~18个字符,可使用字母、数字</td>
</tr>
<tr>
<td>密码:</td>
<td><input  type="password"  name="mm1" id="mm1"></input></td>
<td>4~16个字符,区分大小写</td>
</tr>
<tr>
<td>确认密码:</td>
<td><input  type="password" name="mm2" id="mm2"></input></td>
<td>请再次填写密码</td>
</tr>
<tr>
<td>性别:</td>
<td><input  type="radio"  name="sex" id="sex1"  checked>男</input>
<input  type="radio"  name="sex" id="sex2">女</input>
</td>
<td></td>
</tr>
<tr style="background-color: white;" >
<td  style="background-color: white;"></td>
<td>
<button   id="tj">提交</button>
<input type="reset"  id="cz"></input>
</td>
<td  style="background-color: white;"></td>
</tr>
</table>
</body>
<script type="text/javascript">
var  oTj=document.getElementById('tj');
var  oYhm=document.getElementById('yhm');
var  oMm1=document.getElementById('mm1');
var  oMm2=document.getElementById('mm2');
var   oCz=document.getElementById('cz');
oTj.onclick=function(){
// window.confirm("你确定要提交吗?");
var yhm=oYhm.value;
var len=oYhm.value.length;
var len2=oMm1.value.length;
if(len<4 || len>18){
alert("温馨提示:用户名应该在4-18之间!");
}
// alert(len);
for(var i=0;i<len;i++){
if(!(yhm.charAt(i)>='a' && yhm.charAt(i)<='z') && !(yhm.charAt(i)>='A' && yhm.charAt(i)<='Z')  &&  !(yhm.charAt(i)>='0' && yhm.charAt(i)<='9')){
alert("温馨提示:只能输入数字或字母!"); 
break;
}
// alert(oYhm.value.length);
}
if(len2<4 || len2>16){
alert("温馨提示:密码长度应该在4-16之间!");
}
if(oMm1.value != oMm2.value){
alert("温馨提示:你两次输入的密码长度不一致!");
}
}
oCz.onclick=function(){
oYhm.value="";
oMm1.value="";
oMm2.value="";
}
</script>
</html>


本文地址:https://www.pengqi.club/blog/74.html
版权声明:本文为原创文章,版权归 彭淇 所有,欢迎分享本文,转载请保留出处!

发表评论


表情

还没有留言,还不快点抢沙发?