表单验证案例
html代码
<!-- 整个大盒子 -->
<div class="wrap">
<!-- 表单头部 -->
<div class="top_wrap">
<span>账户信息</span>
</div>
<!-- 表单内容 -->
<div class="contion">
<form action="" method="post">
<!-- 通过ul li来布局表单 -->
<ul>
<li>
<span class="xing">
<i>*</i>
用户名：</span>
<input type="text" id="uname" class="border" maxlength="30" placeholder="用户名设置成功后不可修改">
<span class="tishi">6-30位字母、数字或"_"，字母开头</span>
</li>
<div>
<span class="xing"></span>
<i class="cha"></i>
<i>用户名长度不能少于6个字符！</i>
</div>
<li>
<span class="xing">
<i>*</i> 登录密码：</span>
<input type="password" name="" id="psw" class="border" maxlength="20" placeholder="6-20位字母、数字或符号">
</li>
<div>
<span class="xing"></span>
<i class="cha"></i>
<i>登录密码密码长度不能少于6个字符</i>
</div>
<li>
<span class="xing">
<i>*</i> 确认密码：</span>
<input type="password" name="" id="psw1" class="border" maxlength="20" placeholder="再次输入您的登录密码">
</li>
<div>
<span class="xing"></span>
<i class="cha"></i>
<i>确认密码与密码不同！</i>
</div>
<li>
<span class="xing">
<i>*</i> 证件类型：</span>
<select name="" id="" class="border">
<option value="">中国居民身份证</option>
<option value="">港澳居民来往内地通行证</option>
<option value="">台湾居民来往大陆通行证</option>
<option value="">护照</option>
</select>
</li>
<li class="height">
<span class="xing">
</span>
<label for="">
<input type="radio" name="1" id=""
checked>中国居民身份证
</label>
</li>
<li class="height">
<span class="xing">
</span>
<label for="">
<input type="radio" name="1" id="">外国人永久身份证
</label>
</li>
<li class="height">
<span class="xing">
</span>
<label for="">
<input type="radio" name="1" id="">港澳台居民身份证
</label>
</li>
<li>
<span class="xing">
<i>*</i> 姓名：</span>
<input type="text" name="" id="sexname" class="border" placeholder="请输入姓名"><span class="tishi">姓名填写规则（用于身份核验，请正确填写）</span>
</li>
<li>
<span class="xing">
<i>*</i> 证件号码：</span>
<input type="text" name="" id="zhengjian" class="border" maxlength="18" placeholder="请输入您的证件号码"><span class="tishi">（用于身份核验，请正确填写）</span>
</li>
<div>
<span class="xing"></span>
<i class="cha"></i>
<i>请正确输入18位的证件号码！</i>
</div>
<li>
<span class="xing">
邮箱：</span>
<input type="text" name="" id="e-mail" class="border" placeholder="请正确写邮箱地址">
</li>
<div>
<span class="xing"></span>
<i class="cha"></i>
<i>请输入有效的电子邮件地址！</i>
</div>
<li>
<span class="xing">
<i>*</i> 手机号码(+86)：</span>
<input type="text" name="" id="phone" class="border" maxlength="11" placeholder="请输入您的手机号码"><span class="tishi">请正确填写手机号码，稍后将向该手机号码发送短信验证码</span>
</li>
<div>
<span class="xing"></span>
<i class="cha"></i>
<i>您输入的手机号码不是有效的格式！</i>
</div>
<li>
<span class="xing">
<i>*</i> 旅客类型：</span>
<select name="" id="" class="border">
<option value="">成人</option>
<option value="">儿童</option>
<option value="">学生</option>
<option value="">残疾军人、伤残人民警察</option>
</select>
</li>
<li class="height">
<span class="xing">
</span>
<label for="">
<input type="checkbox" name="" id="ckbox">
我已阅读并同意遵守
<a href="#">《中国铁路客户服务中心网站服务条款》</a>
<a href="#">《隐私权政策》</a>
</label>
</li>
</ul>
<!-- 下一步按钮 -->
<input type="button" value="下一步" id="btn">
</form>
</div>
</div>
css样式
/* 清除浏览器默认样式 */
* {
margin: 0;
padding: 0;
}
/* 清除ulli样式 */
ul li {
list-style: none;
}
/* 清除a标签的下划线 */
a {
text-decoration: none;
}
/* 清除i标签的默认样式，在添加字体红色和大小 */
i {
font-style: normal;
color: red;
font-size: 14px;
}
/* 给整个大盒子样式 */
.wrap {
width: 1200px;
min-width: 1200px;
margin: 100px auto;
border: 1px solid rgb(28, 126, 194);
border-radius: 5px 5px 0 0;
box-sizing: border-box;
}
/* 头部样式 */
.top_wrap {
width: 1200px;
height: 40px;
background-color: rgb(28, 126, 194);
border-bottom: 2px solid rgb(104, 202, 233);
border-radius: 5px 5px 0 0;
}
/* 头部文本样式 */
.top_wrap span {
color: rgb(229, 248, 255);
font-size: 16px;
margin-left: 20px;
line-height: 40px;
}
/* 内容盒子样式 */
.contion {
width: 1200px;
padding: 0 20px;
box-sizing: border-box;
}
/* form表单样式 */
form {
margin: 50px auto 0;
width: 1150px;
}
/* 每个li的样式 */
ul li {
width: 1150px;
margin-bottom: 7px;
}
/* 设置ul里每个span的样式 */
form ul span {
display: inline-block;
font-size: 14px;
}
/* 设置ul里每个div的样式 */
form ul div {
margin-bottom: 10px;
display: none;
}
/* 错误弹出红叉样式 */
.cha {
display: inline-block;
width: 18px;
height: 18px;
vertical-align: middle;
margin-right: 10px;
box-sizing: border-box;
background-image: url("../images/icon.png");
background-position: 0 -350px;
}
/* 这是让表单边框，左边文字统一右对齐 */
.xing {
width: 39%;
text-align: right;
}
/* input设置样式 */
ul li input {
margin-right: 12px;
box-sizing: border-box;
}
/* input边框设置样式 */
.border {
width: 250px;
height: 35px;
border: 1px solid rgb(207, 205, 199);
padding-left: 5px;
box-sizing: border-box;
outline: none;
}
/* 表单，右边提示文本样式 */
.tishi {
color: #ff7f00;
}
/* 选项label样式 */
ul li label {
font-size: 14px;
line-height: 28px;
}
.height {
height: 28px;
}
/* a标签hover样式 */
a:hover {
color: #3b99fc;
}
/* 下一步按钮样式 */
#btn {
width: 150px;
height: 40px;
margin: 40px auto;
display: block;
border: none;
background-color: #ff7f00;
color: #fff;
border-radius: 4px;
}
// 封装获取文本标签函数
function $(id) {
return document.getElementById(id);
}
// 获取ul里的div
var divs = document.querySelectorAll('ul>div')
// 获取表单
var uname = $('uname')
var psw = $('psw')
var psw1 = $('psw1')
var zjh = $('zhengjian')
var e_mail = $('e-mail')
var phone = $('phone')
// 封装一个用正则来判断，表单里填写的内容是否正确的函数
function panduan(a, reg, div) {
a.style.border = "1px solid #ff3040"
div.style.display = 'block'
if (reg.test(a.value)) {
div.style.display = 'none'
a.style.border = "1px solid rgb(207, 205, 199)"
}
}
// 判断用户名
uname.onblur = function() {
var reg1 = /^[a-zA-Z](\w+){5,29}$/
panduan(uname, reg1, divs[0])
}
// 判断密码
psw.onblur = function() {
var reg1 = /(\w+){6,20}$/
panduan(psw, reg1, divs[1])
}
// 判断再次输入密码
psw1.onblur = function() {
this.style.border = "1px solid #ff3040"
divs[2].style.display = 'block'
if (this.value === psw.value) {
divs[2].style.display = 'none'
this.style.border = "1px solid rgb(207, 205, 199)"
}
}
// 判断身份证证件号码
zjh.onblur = function() {
var reg1 = /^[1-9][0-9]{16}[0-9xX]$/
panduan(zjh, reg1, divs[3])
}
// 判断邮箱格式
e_mail.onblur = function() {
var reg1 = /^[0-9a-zA-Z]{1,}@[0-9a-zA-Z]+(\.com)$/ // 以数字和字母开头的至少出现一位，有@和.com结尾的邮箱
panduan(e_mail, reg1, divs[4])
}
// 判断手机号码格式
phone.onblur = function() {
var reg1 = /^1[0-9]{10}$/ //选取以1开的头的，后面以0-9的10个数组成的手机号
panduan(phone, reg1, divs[5])
}
效果图
扫一扫
287
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
