码迷,mamicode.com
首页 > 其他好文 > 详细

表单验证案例

时间:2019-06-27 00:48:01      阅读:101      评论:0      收藏:0      [点我收藏+]

标签:doctype   before   phone   eal   sele   完整   gre   复制   手机号   

技术图片

 

这是我的一个实例,复制黏贴到三个文件中即可正确执行。

以下是index.css代码:

====================

*{
padding: 0;
margin: 0;
font-size: 18px;
font-family: "黑体";
}
body{
background: #eee;
}
.container{
width: 960px;
background: #fff;
border-radius: 10px;
margin: 100px auto;
}
.container > .header {
text-align: center;
background: #77f;
color: #eee;
height: 45px;
line-height: 45px;
border-radius: 10px 10px 0 0;
}
.container > .body >.content{
height: 93px;
}
.container > .body >.content > .row{
margin-left: 100px;
margin-top: 20px;
position: relative;
}
.container > .body >.content > .row+p{
margin-top: 9px;
margin-bottom: 20px;
margin-left: 157px;
color: #090;
}
.container > .body >.content > .row > input,#sex1 {
position: absolute;
left: 150px;
top: -2px;
width: 500px;
}
.container > .body >.content > .row > #sex1 {
display: inline-block;
height: 30px;
width: 505px;
text-indent: 220px;
}
.container > .body >.content > .row > span{
position: absolute;
left: 55px;
top: 0px;
}

.container > .body >.content > .row:before{
content: "*";
font-size: 20px;
position: relative;
left: 43px;
top: 0px;
color: #093;
}
.container > .body > .btnContainer{
text-align: center;
}
.container > .body > .btnContainer > #btn{
margin: 30px auto;
width: 200px;
height: 50px;
border-radius: 10px;
}

====================

 

以下是index.js代码:

====================

var userName=getById("userName"),//用户名
alertText=getById(‘body‘).getElementsByTagName("p"),//信息提示框
password=getById("password"),//密码
checkedPassword=getById("checkedPassword"),//确认密码
nameone=getById("nameone"),//姓名
identify=getById("identify"),//身份证
btn=getById("btn"),//获取按钮
inputs=document.getElementsByTagName(‘input‘),//获得所有的input标签
alertTexts=document.querySelectorAll(".alertText"),//获取所有的提示信息
pattern;//正则表达式

//获取id指定的对象
function getById(id){
return document.getElementById(id);
}

//隐藏所有信息提示
function hideAlertText(){
for (var i = 0; i < alertText.length; i++) {
alertText[i].innerHTML="";
}
}

//所有输入框获得焦点的事件,提示输入信息
function ojbFocus(arr,arr1){
for (var i = 0; i < arr.length; i++) {
arr[i].onfocus=function(){
// console.log(arr1[this.getAttribute("i")]);
arr1[this.getAttribute("i")].innerHTML=this.getAttribute("alertText");
}
}
}

//所有输入框失去焦点时触发事件,并验证是否正确
function userNameBlur(arr,arr1){
for (var i = 0; i < arr.length; i++) {
arr[i].onblur=function(){
if (!this.value) {
arr1[this.getAttribute("i")].innerHTML="不能为空,请输入内容";
arr1[this.getAttribute("i")].style.color="red";
return;
}
var param=this.getAttribute("patt");
var pattern=new RegExp(param);
if (this.getAttribute("i")==="2") {
if(this.value!==arr[1].value){
arr1[2].innerHTML="两次密码输入不一致,请重新输入";
arr1[2].style.color="red";
return;
}
}
if (pattern.exec(this.value)) {
arr1[this.getAttribute("i")].innerHTML="格式正确";
arr1[this.getAttribute("i")].style.color="green";

}else{
arr1[this.getAttribute("i")].innerHTML=this.placeholder;
arr1[this.getAttribute("i")].style.color="red";
}
}
}
}

function submit(){
btn.onclick=function(){
for (var i = 0; i < inputs.length; i++) {
if (!inputs[i].value) {
inputs[i].focus();
alertTexts[i].innertHTML=inputs[i].placeholder;
alertTexts[i].style.color="red";
return;
}
}
for (var i = 0; i < alertTexts.length; i++) {
if (alertTexts[i].style.color==="red") {
inputs[i].focus();
alert("信息填写不完整,无法注册!");
return;
}
}
alert("注册成功");
}
}
//隐藏所有信息提示
hideAlertText()

//所有输入框获得焦点事件,提示输入信息
ojbFocus(inputs,alertTexts);

var pattern=/^\w{6.18}$/;
userNameBlur(inputs,alertTexts);
//提交信息,信息不完整
submit();

====================

 

以下是HTML代码:

====================

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="style/index.css">
</head>
<body>
<div class="container">
<div class="header">—— —— 用户注册 —— ——</div>
<hr/>
<div class="body" id="body">
<div class="content">
<div class="row" id="row">
<span>用户名:</span>
<input id="userName" patt="^\w{10,18}$" alertText="请输入10-18位:字母,数字,下划线" type="text" i="0" placeholder="格式不对,请输入10-18位用户名:英文,数字,下划线">
</div>
<p class="alertText" id="userName1">1111</p>
</div>
<hr/>
<div class="content">
<div class="row">
<span>登录密码:</span>
<input id="password" patt="^\w{6,16}$" alertText="请输入6-16位密码(包括:字母,数字,下划线)" type="password" i="1" placeholder="格式不对,请输入6-16位密码(包括:字母,数字,下划线)">
</div>
<p class="alertText" id="password1">1111</p>
</div>
<hr/>
<div class="content">
<div class="row">
<span>确认密码:</span>
<input id="checkedPassword" id="checkedPsd" patt="^\w{6,16}$" alertText="请输入6-16位密码(包括:字母,数字,下划线)" type="password" i="2" placeholder="格式不对,请输入6-16位密码(包括:字母,数字,下划线)">
</div>
<p class="alertText" id="checkedPassword1">1111</p>
</div>
<hr/>
<div class="content">
<div class="row">
<span>姓名:</span>
<input id="nameone" patt="^[\u4e00-\u9fa5]{2,4}$" alertText="请输入2-4个汉字的姓名" type="text" i="3" placeholder="格式不对,请输入2-4个汉字的姓名">
</div>
<p class="alertText" id="nameone1">1111</p>
</div>
<hr/>
<div class="content">
<div class="row">
<span>性别:</span>
<select id="sex1" id="sex" name="sex">
<option value="man">男</option>
<option value="woman">女</option>
</select>
</div>
<!-- <p class="alertText" id="">1111</p> -->
</div>
<hr/>
<div class="content">
<div class="row">
<span>身份证:</span>
<input id="identify" patt="^[1-9][0-9]{16}[0-9X]$" alertText="请重新输入18为数的身份证" type="text" i="4" placeholder="格式不对,请输入18为数的身份证">
</div>
<p class="alertText" id="identify1">1111</p>
</div>
<hr/>
<div class="content">
<div class="row">
<span>邮箱地址:</span>
<input id="email" patt="^\w*@\w*\.[a-zA-Z]{2,5}" alertText="请输入邮箱格式如:xxx@xx.xxx" type="text" i="5" placeholder="格式不对,邮箱格式必须是xxx@xx.xxx">
</div>
<p class="alertText" id="email1">1111</p>
</div>
<hr/>
<div class="content">
<div class="row">
<span>手机号码:</span>
<input id="phone" patt="^[1][356789][0-9]{9}$" alertText="请重新输入11位手机号码" type="text" i="6" placeholder="格式不对,请输入11位数手机号码">
</div>
<p class="alertText" id="phone1">1111</p>
</div>
<hr/>
<div class="btnContainer">
<button id="btn">注 册</button>
</div>
</div>
</div>
<script type="text/javascript" src="js/index.js"></script>
</body>
</html>

====================

 

表单验证案例

标签:doctype   before   phone   eal   sele   完整   gre   复制   手机号   

原文地址:https://www.cnblogs.com/Knowledge-is-infinite/p/11094524.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!