js表单验证

最新推荐文章于 2020-09-30 06:08:37 发布

一梦醉殇

最新推荐文章于 2020-09-30 06:08:37 发布

阅读量255

点赞数

分类专栏： js

js 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js表单验证</title>
<style type="text/css">
body,dl,dt,dd,div,form {padding:0;margin:0;}

#header,#main{
width:650px;
margin:0 auto;
}

.bg_top_left{
background-position:0px 0px;
}
.bg_top_right{
background-position:0px -6px;
}
.bg_end_left{
background-position:0px -12px;
}
.bg_end_right{
background-position:0px -18px;
}
.bg_top{
border-top:solid 1px #666666;
}
.bg_end{
border-bottom:solid 1px #666666;
}
.bg_left{
border-left:solid 1px #666666;
}
.bg_right{
border-right:solid 1px #666666;
}

.content{
padding:10px;
}
.inputs{
border:solid 1px #a4c8e0;
width:150px;
height:15px;
}

.userWidth{
width:110px;
}
.content div{
float:left;
font-size:12px;
color:#000;
}
dl{
clear:both;
}
dt,dd{
float:left;
}
dt{
width:130px;
text-align:right;
font-size:14px;
height:30px;
line-height:25px;
}
dd{
font-size:12px;
color:#666666;
width:180px;
}
/*当鼠标放到文本框时，提示文本的样式*/
.import_prompt{
border:solid 1px #ffcd00;
background-color:#ffffda;
padding-left:5px;
padding-right:5px;
line-height:20px;
}
/*当文本框内容不符合要求时，提示文本的样式*/
.error_prompt{
border:solid 1px #ff3300;
background-color:#fff2e5;
background-image:url(img/li_err.png);
background-repeat:no-repeat;
background-position:5px 2px;
padding:2px 5px 0px 25px;
line-height:20px;
background-size: 18px;
}
/*当文本框内容输入正确时，提示文本的样式*/
.ok_prompt{
border:solid 1px #01be00;
background-color:#e6fee4;
background-image:url(img/li_ok.png);
background-repeat:no-repeat;
background-position:5px 2px;
padding:2px 5px 0px 25px;
line-height:20px;
background-size: 18px;
}
</style>
</head>
<body>
<div class="main">
<table>
<tr>
<td class="bg bg_top_left"></td>
<td class="bg_top"></td>
<td class="bg bg_top_right"></td>
</tr>
<tr>
<td class="bg_left"></td>
<td class="content">
<form action="" method="post" name="myform" οnsubmit="return checkForm()">
<dl>
<dt>通行证用户名：</dt>
<dd><input type="text" id="userName" class="inputs userWidth" placeholder="通行证用户名" /> @163.com</dd>
<div id="userNameId"></div>
</dl>
<dl>
<dt>登录密码：</dt>
<dd><input type="password" id="pwd" class="inputs" /></dd>
<div id="pwdId"></div>
</dl>
<dl>
<dt>重复登录密码：</dt>
<dd><input type="password" id="repwd" class="inputs" /></dd>
<div id="repwdId"></div>
</dl>
<dl>
<dt>性别：</dt>
<dd><input name="sex" type="radio" checked="checked"/>男 <input name="sex" type="radio" />女 </dd>
</dl>
<dl>
<dt>真实姓名：</dt>
<dd><input οnblur="isChinese(this.value)" type="text" id="realName" class="inputs" placeholder="请输入中文！"/></dd>
<div id="realNameId"></div>
</dl>
<dl>
<dt>昵称：</dt>
<dd><input type="text" id="nickName" class="inputs" placeholder="一帘幽梦"/></dd>
<div id="nickNameId"></div>
</dl>
<dl>
<dt>关联手机号：</dt>
<dd><input type="text" id="tel" class="inputs"/></dd>
<div id="telId"></div>
</dl>
<dl>
<dt>保密邮箱：</dt>
<dd><input type="text" id="email" class="inputs"/></dd>
<div id="emailId"></div>
</dl>
<dl>
<dt></dt>
<dd><button type="button">提交</button></dd>
</dl>
</form>
</td>
<td class="bg_right"></td>
</tr>
<tr>
<td class="bg bg_end_left"></td>
<td class="bg_end"></td>
<td class="bg bg_end_right"></td>
</tr>
</table>

</div>

<script type="text/javascript">
var userName = document.getElementById('userName');
var pwd = document.getElementById('pwd');
var repwd = document.getElementById('repwd');
var realName = document.getElementById('realName');
var nickName = document.getElementById('nickName');
var tel = document.getElementById('tel');
var email = document.getElementById('email');

//通行证账号
userName.onfocus = function(){
var userNameId = document.getElementById('userNameId');
userName.placeholder="";
userNameId.className="import_prompt";
userNameId.innerHTML = "1、由字母、数字、下划线、点、减号组成<br/>2、只能以数字、字母开头或结尾，且长度为4-18"
}
userName.onblur = function(){
var userNameId = document.getElementById('userNameId');
var reg=/^[0-9a-zA-Z][0-9a-zA-Z_.-]{2,16}[0-9a-zA-Z]$/;
if(userName.value==""){
userNameId.className="error_prompt";
userNameId.innerHTML="通行证用户名不能为空，请输入通行证用户名";
return false;
}
if(reg.test(userName.value)==false){
userNameId.className="error_prompt";
userNameId.innerHTML="1、由字母、数字、下划线、点、减号组成<br/>2、只能以数字、字母开头或结尾，且长度为4-18";
return false;
}
userNameId.className="ok_prompt";
userNameId.innerHTML="通行证用户名输入正确";
return true;
}

//登录密码
pwd.onfocus = function(){
var pwdId = document.getElementById('pwdId');
pwdId.className="import_prompt";
pwdId.innerHTML="密码长度为6-16";
}
pwd.onblur = function(){
var pwdId = document.getElementById('pwdId');
if(pwd.value==""){
pwdId.className="error_prompt";
pwdId.innerHTML="密码不能为空，请输入密码";
return false;
}
if(pwd.value.length<6 || pwd.value.length>16){
pwdId.className="error_prompt";
pwdId.innerHTML="密码长度为6-16";
return false;
}
pwdId.className="ok_prompt";
pwdId.innerHTML="密码输入正确";
return true;
}

//重复确认密码
repwd.onblur =function(){
var repwdId = document.getElementById('repwdId');
if(repwd.value==""){
repwdId.className="error_prompt";
repwdId.innerHTML="重复密码不能为空，请重复输入密码";
return false;
}
if(repwd.value!=pwd.value){
repwdId.className="error_prompt";
repwdId.innerHTML="两次输入的密码不一致，请重新输入";
return false;
}
repwdId.className="ok_prompt";
repwdId.innerHTML="两次密码输入正确";
return true;
}
//真实姓名
function isChinese(obj){
var realNameId = document.getElementById('realNameId');
var reg=/^[\u0391-\uFFE5]+$/;
if(obj!=""&&!reg.test(obj)){
realNameId.className="error_prompt";
realNameId.innerHTML="只能输入汉字";
return false;
}
}

//昵称
nickName.onfocus = function(){
var nickNameId = document.getElementById('nickNameId');
nickName.placeholder="";
nickNameId.className="import_prompt";
nickNameId.innerHTML="1、包含汉字、字母、数字、下划线以及@!#$%&*特殊字符<br/>2、长度为4－20个字符<br/>3、一个汉字占两个字符";
}
nickName.onblur = function(){
var nickNameId = document.getElementById('nickNameId');
var reg=/^([\u4e00-\u9fa5]|\w|[@!#$%&*])+$/; // 匹配昵称
var chinaReg=/[\u4e00-\u9fa5]/g; //匹配中文字符
if(nickName.value==""){
nickNameId.className="error_prompt";
nickNameId.innerHTML="昵称不能为空，请输入昵称";
return false;
}
if(reg.test(nickName.value)==false){
nickNameId.className="error_prompt";
nickNameId.innerHTML="只能由汉字、字母、数字、下划线以及@!#$%&*特殊字符组成";
return false;
}

var len=nickName.value.replace(chinaReg,"ab").length; //把中文字符转换为两个字母，以计算字符长度
if(len<4||len>20){
nickNameId.className="error_prompt";
nickNameId.innerHTML="1、长度为4－20个字符<br/>2、一个汉字占两个字符";
return false;
}

nickNameId.className="ok_prompt";
nickNameId.innerHTML="昵称输入正确";
return true;
}

//关联手机号
tel.onfocus = function(){
var telId = document.getElementById('telId');
telId.className="import_prompt";
telId.innerHTML="1、手机号码以13，15，18开头<br/>2、手机号码由11位数字组成";
}
tel.onblur = function(){
var telId = document.getElementById('telId');
var reg=/^(13|15|18)\d{9}$/;
if(tel.value==""){
telId.className="error_prompt";
telId.innerHTML="关联手机号码不能为空，请输入关联手机号码";
return false;
}
if(reg.test(tel.value)==false){
telId.className="error_prompt";
telId.innerHTML="关联手机号码输入不正确，请重新输入";
return false;
}
telId.className="ok_prompt";
telId.innerHTML="关联手机号码输入正确";
return true;
}

//保密邮箱
email.onfocus = function(){
var emailId = document.getElementById('emailId');
emailId.className="import_prompt";
emailId.innerHTML="请输入您常用的电子邮箱";
}
email.onblur = function(){
var emailId = document.getElementById('emailId');
var reg=/^\w+@\w+(\.[a-zA-Z]{2,3}){1,2}$/;
if(email.value==""){
emailId.className="error_prompt";
emailId.innerHTML="保密邮箱不能为空，请输入保密邮箱";
return false;
}
if(reg.test(email.value)==false){
emailId.className="error_prompt";
emailId.innerHTML="保密邮箱格式不正确，请重新输入";
return false;
}
emailId.className="ok_prompt";
emailId.innerHTML="保密邮箱输入正确";
return true;
}

</script>
</body>
</html>

一梦醉殇

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js表单验证

js表单验证body,dl,dt,dd,div,form {padding:0;margin:0;}#header,#main{ width:650px; margin:0 auto; } .bg_top_left{ background-position:0px 0px; } .bg_top
复制链接

扫一扫

专栏目录