JavaScript表单验证

最新推荐文章于 2020-03-24 22:34:47 发布

须佐能乎！

最新推荐文章于 2020-03-24 22:34:47 发布

阅读量383

点赞数 2

分类专栏： JavaScript HTML 文章标签： javascript html 表单验证正则表达式

本文链接：https://blog.csdn.net/qq_34416191/article/details/51722102

版权

JavaScript 同时被 2 个专栏收录

14 篇文章 0 订阅

订阅专栏

HTML

13 篇文章 0 订阅

订阅专栏

<html>
	<head>
		<title>JS表单验证</title>
		
		<script>
		//验证用户名
		function checkName() {
			var _uName = document.form1.uName.value;
			var _s1    = document.getElementById("s1");
			if(_uName=="") {
				_s1.innerHTML = "<font color=red>用户名不能为空！</font>";
				document.form1.uName.focus();//将焦点定位到用户名文本框
			}else {
				_s1.innerHTML = "<font color=green>用户名输入成功！</font>";
			}
		}
		//验证密码
		function checkPsd() {
			var _psd = document.form1.psd.value;
			var _s2  = document.getElementById("s2");
			var reg  = /^[A-Za-z0-9]{6,12}$/; //正则表达式，表示6到12位由数字和字母组成的密码
			if(!reg.test(_psd)) {
				_s2.innerHTML = "<font color=red>密码由6-12位数字和字母组成！</font>";
				document.form1.psd.focus();//将焦点定位到密码框
			}else {
				_s2.innerHTML = "<font color=green>密码输入成功！</font>";
			}
		}
		//验证两次密码是否一致
		function checkPsd1() {
			var _psd  = document.form1.psd.value;
			var _psd1 = document.form1.psd1.value;
			var _s3   = document.getElementById("s3");
			if( _psd != _psd1 ) {
				_s3.innerHTML = "<font color=red>两次密码输入不一致！</font>";
				document.form1.psd1.focus();//将焦点定位到密码框
			}else {
			   	_s3.innerHTML = "<display=none>;"//隐藏span层
			}
		}
		//验证手机号
		function checkPhone() {
			var _phone = document.form1.phone.value;
			var reg    = /^[0-9]{11}$/;   //手机号，11位数字
			var _s4    = document.getElementById("s4");
			if(!reg.test(_phone)) {
				_s4.innerHTML = "<font color=red>手机号格式不正确!</font>";
				document.form1.phone.focus();//将焦点定位到手机号文本框
			}else {
				_s4.innerHTML = "<display=none>;"//隐藏span层
			}
		}
		//验证邮箱
		function checkMail() {
			var _email = document.form1.email.value;
			var reg   = /^[a-zA-Z0-9]{6,}@[a-z0-9]+\.[a-z]{3}(\.[a-z]{2})?$/; //邮箱正则表达式
			var _s5    = document.getElementById("s5");
			if(!reg.test(_email)) {
				_s5.innerHTML = "<font color=red>邮箱格式不正确！</font>";
				document.form1.email.focus();//将焦点定位到邮箱文本框
			}else {
				_s5.innerHTML = "<display=none>;"//隐藏span层
			}
		}
		//提交数据
		function submitData() {
			return true;//返回true，提交表单数据
			//return false; //返回false，不提交数据
			
		}
		
		
			
		</script>
	</head>
	<body>
		<fieldset>
			<legend>淘宝账号注册</legend>
			<form name="form1" action="" method="post" οnsubmit="return submitData();">
				<table>
					<tr>
						<td >用户名：</td>
						<td><input type="text" name="uName" οnblur="checkName();"><span id="s1"></span></td>
					</tr>
					<tr>
						<td>密码：</td>
						<td><input type="password" name="psd" οnblur="checkPsd();"><span id="s2"></span></td>
					</tr>
					<tr>
						<td>确认密码：</td>
						<td><input type="password" name="psd1" οnblur="checkPsd1();"><span id="s3"></span></td>
					</tr>
					<tr>
						<td>手机号：</td>
						<td><input type="text" name="phone" οnblur="checkPhone();"><span id="s4"></span></td>
					</tr>
					<tr>
						<td>邮箱：</td>
						<td><input type="text" name="email" οnblur="checkMail();"><span id="s5"></span></td>
					</tr>
					<tr>
						<td clospan="2"><input type="submit" name="sent" value="提交"></td>
						
					</tr>
				</table>
				
			</form>
			
		</fieldset>
	</body>
</html>

须佐能乎！

关注

2
点赞
踩
1

收藏

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

JS表单验证 //验证用户名 function checkName() { var _uName = document.form1.uName.value; var _s1 = document.getElementById("s1"); if(_uName=="") { _s1.innerHTML = "用户名不能为空！"; docum
复制链接

扫一扫