当前位置:首页 > Javascript > 正文内容

js实现简单的注册表验证

彭淇3年前 (2017-07-18)Javascript31090

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

分享给朋友:

相关文章

网站优化如何提高页面的加载速度

网站优化如何提高页面的加载速度

加快网页的加载速度,无疑是提高用户体验的一个很好的方法。但是这里我们如何提高网页的加载速度呢?这里是我所理解的和网上搜索到的几点总结。  1. 使用良好的结构 &n...

判断用户当前设备终端型号 – 设备侦测工具

判断用户当前是什么设备,甚至可以侦测出手机型号乃至系统版本。此代码来自SUI Mobile源码,我只是搬运工,需要借助zepto.js SUI Mobile官方提供的zepto.js(CDN),...

网页闹钟JS代码

网页闹钟JS代码

网页闹钟JS代码 有时候我们会突然忘记在什么时间段做什么事情, 你可能会使用手机设置一个闹钟,如果再给电脑设置一个,那不是更好么? 这里就是闹钟的效果了...

jquery统计页面加载时间

有时我们想要统计页面加载时间, 但是php是服务器端的,在应用中数据显示非常不符合实际。 其实最好的方法应该是在客户端统计时间,利用js或jquery是最佳选择。...

以表单提交前邮箱检测为例解析javascript正则表达式检测

表单检测在登录、注册、订单、留言板等重要部件都必不可少。下面飞翔勿扰就根据表单提交前邮箱的检测为例简单解析一下javascript正则表达式的使用。实例代码非常实用,让诸君先睹为快~...

js实现点击按钮添加和删除表单效果

js实现点击按钮添加和删除表单效果

<!DOCTYPE html> <html> <head> <meta charset="UTF-8">...

发表评论

访客

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。