12306表单验证

最新推荐文章于 2023-04-11 09:41:36 发布

努力学习的小蜗牛

最新推荐文章于 2023-04-11 09:41:36 发布

阅读量327

点赞数

本文链接：https://blog.csdn.net/weixin_45806273/article/details/109398373

版权

表单验证的由来

表单验证主要是用来判断用户输入的信息是否和注册时的信息是否一致或者是对信息产生合法的校验

文章目录

表单验证的由来
表单验证的事件
一、JavaScript 表单验证
二、常用的几种表单验证方法
三、一个简单的表单案例
结尾

表单验证的事件

1.onfocus（焦点聚焦事件）、onblur（焦点离开事件）、onkeyup（按键抬起的事件）
2.利用事件触发函数，函数中执行校验的信息。
3.利用checkform判断表单中的内容是否规范，如果规范submit按钮可以提交表单信息。

提示：以下是本篇文章正文内容，下面案例可供参考

一、JavaScript 表单验证

JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证。常用if的方法来判断

二、常用的几种表单验证方法

1.长度限制

代码如下（示例）：

<p>1. 长度限制</p>
<form name=a οnsubmit="return test()"> 
<textarea name="b" cols="40" rows="6" placeholder="不能超过50个字符！"></textarea>
<br /> 
<input type="submit" name="Submit" value="check"> 
</form>

<script language="javascript"> 
function test() 
{ 
if(document.a.b.value.length>50) 
{ 
alert("不能超过50个字符！"); 
document.a.b.focus(); 
return false; 
}
} 
</script>

2.只能是英文字母和数字

代码如下（示例）：

<script type="text/javascript">
//验证只能是字母和数字 常用于验证账号
function checkZmOrNum(zmnum){ 
var zmnumReg=/^[0-9a-zA-Z]*$/; 
if(zmnum!=""&&!zmnumReg.test(zmnum)){ 
alert("只能输入是字母或者数字,请重新输入");
return false; 
} 
} 
</script>

3.两次输入密码是否相同

代码如下（示例）：

<script type="text/javascript">
function check(){ 
with(document.all){ 
if(input1.value!=input2.value) 
{ 
alert("密码不一致") 
input1.value = ""; 
input2.value = ""; 
} 
else {
alert("密码一致");
document.forms[0].submit(); 
}
}
} 
</script>

4.表单项不能为空

代码如下（示例）：

<script language="javascript"> 
function CheckForm(obj) 
{ 
if (obj.length == 0) { 
alert("姓名不能为空!"); 
return false; 
} 
return true; 
alert("姓名不能为空!"); 
} 
</script>

5.邮箱验证

代码如下（示例）：

<script language="javascript">
function test(obj){
//对电子邮件的验证
var myreg = /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/;
if(!myreg.test(obj))
{
alert('请输入有效的邮箱！');
return false;
}
}
</script>

6.手机号验证

代码如下（示例）：

<script type="text/javascript">
function validatemobile(mobile) 
{ 
if(mobile.length==0) 
{ 
alert('手机号码不能为空！');
return false; 
} 
if(mobile.length!=11) 
{ 
alert('请输入有效的手机号码，需是11位！');
return false; 
} 

var myreg = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/; 
if(!myreg.test(mobile)) 
{ 
alert('请输入有效的手机号码！'); 
return false; 
} 
} 
</script>

三、一个简单的表单案例

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>demo3</title>
	<style>
		* {
			margin: 0;
			padding: 0;
		}

		a {
			text-decoration: none;
		}

		.box {
			width: 740px;
			height: 100vh;
			margin: 10px auto;
			border: 1px solid rgb(22, 22, 255);
			border-radius: 5px;
			overflow: hidden;
		}

		.box h3 {
			text-indent: 2em;
			margin-bottom: 30px;
			color: #fff;
			font-weight: 100;
			background-color: rgb(11, 11, 255);
		}

		.box table tr input.ip {
			border: none;
			outline: none;
			background: none;
		}

		.box table tr td:nth-child(2) input.ip {
			background-color: #fff;
			border: 1px solid #ccc;
			width: 200px;
			height: 30px;
			line-height: 30px;
		}

		.box table tr td:first-child {
			text-align: right;
		}

		.box table tr td:first-child span {
			color: red;
			font-weight: 600;
		}

		.box table tr td:nth-child(3) {
			color: orange;
			font-size: 14px;
		}

		.box table tr .tips {
			font-size: 14px;
			color: #ff3040;
		}

		.box table tr .re {
			visibility: hidden;
		}

		.box table tr .icon {
			width: 14px;
			height: 14px;
			background: url(img/icon.png) no-repeat;
			background-size: 20px;
			background-position: 0 -900px;
			display: inline-block;
		}

		.box table tr .icon_X {
			background-position: 0 -600px;
		}

		.box table .smt {
			text-align: center !important;
		}

		#btn {
			border: 0;
			background: none;
			outline: none;
			background-color: orange;
			color: #fff;
			border-radius: 5px;
			font-size: 18px;
			width: 100px;
			height: 30px;
			cursor: pointer;
			text-align: center;
			line-height: 30px;
		}
	</style>
</head>

<body>
	<div class="box" id="box">
		<h3>账户信息</h3>
		<form action="index.html">
			<table>
				<tbody>
					<tr>
						<td><span>*</span>用户名：</td>
						<td><input type="text" name="username" id="username" class="ip" placeholder="用户名设置成功后不可修改"></td>
						<td>6 - 30位字母、数字或"_"，字母开头</td>
					</tr>
					<tr>
						<td></td>
						<td colspan="2" class="tips re">
							<div class="icon"></div>用户名不能为空
						</td>
					</tr>
					<tr>
						<td><span>*</span>登录密码：</td>
						<td><input type="password" name="pwd" id="pwd" class="ip" placeholder="6-20位字母、数字或符号"></td>
						<td></td>
					</tr>
					<tr>
						<td></td>
						<td colspan="2" class="tips re">
							<div class="icon"></div>登录密码不能为空
						</td>
					</tr>
					<tr>
						<td><span>*</span>确认密码：</td>
						<td><input type="password" id="repwd" class="ip" placeholder="再次输入你的密码"></td>
						<td>
							<div class="" id="icon"></div>
						</td>
					</tr>
					<tr>
						<td></td>
						<td colspan="2" class="tips re">
							<div class="icon"></div>确认密码与密码不同
						</td>
					</tr>
					<tr>
						<td><span>*</span>证件类型：</td>
						<td colspan="2"><select name="" id="">
								<option value="中国" selected>中国居民身份证</option>
								<option value="外国">外国人永久身份证</option>
								<option value="港澳台">港澳台居民身份证</option>
							</select></td>
					</tr>
					<tr>
						<td></td>
						<td colspan="2"><input type="radio" name="ID">中国居民身份证</td>
					</tr>
					<tr>
						<td></td>
						<td colspan="2"><input type="radio" name="ID">外国人永久身份证</td>
					</tr>
					<tr>
						<td></td>
						<td colspan="2"><input type="radio" name="ID">港澳台居民身份证</td>
					</tr>
					<tr>
						<td><span>*</span>姓名：</td>
						<td><input type="text" id="X_name" class="ip" placeholder="请输入证件上的中文姓名"></td>
						<td>姓名填写规则（用于身份核验，请正确填写）</td>
					</tr>
					<tr>
						<td></td>
						<td colspan="2" class="tips re">
							<div class="icon"></div>用户名不能为空
						</td>
					</tr>
					<tr>
						<td>邮箱：</td>
						<td><input type="email" id="X_email" class="ip" placeholder="请输入你的证件号码"></td>
						<td></td>
					</tr>
					<tr>
						<td></td>
						<td colspan="2" class="tips re">
							<div class="icon"></div>邮箱不能为空
						</td>
					</tr>
					<tr>
						<td><span>*</span>手机号码(+86)：</td>
						<td><input type="tel" id="X_tel" class="ip" placeholder="请填写你的手机号码"></td>
						<td>请正确填写手机号码，稍后将向该手机号发送短信验证码</td>
					</tr>
					<tr>
						<td></td>
						<td colspan="2" class="tips re">
							<div class="icon"></div>手机号不能为空
						</td>
					</tr>
					<tr>
						<td><span>*</span>证件类型：</td>
						<td><select name="" id="">
								<option value="成人" selected>成人</option>
								<option value="儿童">儿童</option>
							</select></td>
						<td></td>
					</tr>
					<tr>
						<td></td>
						<td colspan="2"><input type="checkbox">我已阅读并同意遵守<span> <a
									href="javascript:void(0);">《中国铁路客户服务中心网络服务条款》</a><a
									href="javascript:void(0);">《隐私权政策》</a></span></td>
					</tr>
				</tbody>
				<tfoot>
					<tr>
						<td colspan="3" class="smt"><input type="submit" id="btn" value="下一步"></td>
					</tr>
				</tfoot>
			</table>
		</form>
	</div>
	<script>
		//获取元素
		var box = document.getElementById("box")
		var tips = document.getElementsByClassName("tips")
		var inputs = document.getElementsByClassName('ip')
		var userName = document.getElementById("username")
		var pwd = document.getElementById("pwd")
		var repwd = document.getElementById("repwd")
		var icon = document.getElementById("icon")
		var btn = document.getElementById('btn')
		// console.log(inputs)
		//给每一个提示文字添加下标
		for (var i = 0; i < tips.length; i++) {
			tips[i].setAttribute("index", i)
		}
		for (var i = 0; i < inputs.length; i++) {
			inputs[i].setAttribute("index", i)
			inputs[i].onblur = function () {
				var index = this.getAttribute('index')
				if (this.value == "") {
					this.style.borderColor = "red"
					tips[index].className = "tips"
				} else {
					this.style.borderColor = "#ccc"
					tips[index].className = "tips re"
				}
			}

		}
		//用户名验证
		userName.onblur = function () {
			var index = this.getAttribute('index')
			if (this.value == "") {
				this.style.borderColor = "red"
				tips[index].className = "tips"
			} else {
				if ((this.value).length < 6 || (this.value).length > 30) {
					this.style.borderColor = "red"
					tips[index].className = "tips"
					tips[index].innerText = "用户名长度不够"
					return
				}
				this.style.borderColor = "#ccc"
				tips[index].className = "tips re"
			}
		}
		//密码输入验证
		pwd.onblur = function () {
			var index = this.getAttribute("index")
			if (this.value == "") {
				this.style.borderColor = "red"
				tips[index].className = "tips"
			} else {
				if ((this.value).length < 6 || (this.value).length > 20) {
					this.style.borderColor = "red"
					tips[index].className = "tips"
					tips[index].innerText = "登录密码不能少于6个字符"
					return
				}
				this.style.borderColor = "#ccc"
				tips[index].className = "tips re"
			}
			pwd_m = this.value
		}
		//密码二次验证
		repwd.onblur = function () {
			var index = this.getAttribute("index")
			if (this.value == "") {
				this.style.borderColor = "red"
				tips[index].className = "tips"
			} else {
				if (this.value != pwd_m) {
					this.style.borderColor = "red"
					icon.className = ""
					tips[index].className = "tips"
					return
				}
				this.style.borderColor = "#ccc"
				icon.className = "icon icon_X"
				tips[index].className = "tips re"
			}
		}
		btn.onclick = function () {
			for (var k = 0; k < inputs.length; k++) {
				if (inputs[k].value == "") {
					return false
				} else {
					return true
				}
			}
		}
	</script>
</body>

</html>

结尾

介绍一款表单的验证神器

JS组件系列——Form表单验证神器： BootstrapValidator

bootstrapvalidator源码：https://github.com/nghuuphuoc/bootstrapvalidator

boostrapvalidator api：http://bv.doc.javake.cn/api/

努力学习的小蜗牛

关注

0
点赞
踩
0

收藏

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

表单验证的由来表单验证主要是用来判断用户输入的信息是否和注册时的信息是否一致或者是对信息产生合法的校验文章目录表单验证的由来表单验证的事件一、JavaScript 表单验证二、常用的几种表单验证方法1.长度限制2.只能是英文字母和数字3.两次输入密码是否相同4.表单项不能为空5.邮箱验证6.手机号验证三、一个简单的表单案例结尾表单验证的事件1.onfocus（焦点聚焦事件）、onblur（焦点离开事件）、onkeyup（按键抬起的事件）2.利用事件触发函数，函数中执行校验的信息。3.利用c
复制链接

扫一扫