JavaScript表单验证与正则表达式

最新推荐文章于 2022-11-20 22:39:57 发布

万万万万呀

最新推荐文章于 2022-11-20 22:39:57 发布

阅读量182

点赞数 1

文章标签：正则表达式 javascript html

本文链接：https://blog.csdn.net/zbx18292867339/article/details/120354730

版权

表单经常需要做一些非空验证、长度验证、合法性验证等。

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>表单验证</title>
		<script>
			function validateName() {
				//所有的表单项元素都value属性
				var name = document.getElementById("userName").value;
				var msg = document.getElementById("nameMsg");

                /*非空验证*/
				if(name == null || name == "") {
					msg.innerHTML = "用户名不能为空！";
					msg.style.color = "red";
					return false;
				} else if(name.length < 6) {
					msg.innerHTML = "用户名长度必须为大于6的！";
					msg.style.color = "red";
					return false;
				}
				msg.innerHTML = "用户名可用";
				msg.style.color = "green";
				return true;
			}

			function validatePwd() {
				var password1 = document.getElementById("password1").value;
				var msg = document.getElementById("pwdMsg1");
				if(password1 == null || password1 == "") {
					msg.innerHTML = "密码不能为空！";
					msg.style.color = "red";
					return false;
				} else if(password1.length < 8) {
					msg.innerHTML = "密码的长度必须为大于8的！";
					msg.style.color = "red";
					return false;
				}
				msg.innerHTML = "密码合法";
				msg.style.color = "green";
				return true;
			}

			function confirmPwd() {
				var pwd1 = document.getElementById("password1").value;
				var pwd2 = document.getElementById("password2").value;
				var msg = document.getElementById("pwdMsg2");
				if(pwd1 != pwd2) {
					msg.innerHTML = "两次输入的密码不一致！";
					msg.style.color = "red";
					return false;
				}
				msg.innerHTML = "两次输入的密码一致";
				msg.style.color = "green";
				return true;
			}

			function validateGender() {
				var gender = document.getElementById("gender").value;
				if(gender == -1) {
					alert("性别为必选项！");
					return false;
				}
				return true;
			}

			function register() {
				return
				validateName() && validatePwd() && confirmPwd() && validateGender();
			}
		</script>
	</head>

	<body>
		<h1>英雄会注册</h1>
		<form action="提交.html" method="get" onsubmit="return register()">
			*用户名:<input type="text" id="userName" placeholder="请输入用户名" onblur="validateName()" />
			<span id="nameMsg">用户名长度至少6位</span><br /> *密码：
			<input type="password" id="password1" placeholder="请输入密码" onblur="validatePwd()" />
			<span id="pwdMsg1">密码长度至少8位</span><br /> *确认密码：
			<input type="password" id="password2" placeholder="请确认密
码" onblur="confirmPwd()" />
			<span id="pwdMsg2">确认密码与密码一致</span><br /> *性别：
			<select id="gender">
				<option value="-1">请选择性别</option>
				<option value="0">女</option>
				<option value="1">男</option>
			</select><br /><br />
			<button type="submit">注册</button>
			<button type="reset">重置</button>
		</form>
	</body>

</html>

JavaScript的 RegExp 对象-正则表达式

1.概念

RegExp：是正则表达式（regular expression）的简写。正则表达式（英语：Regular Expression，在代码中常简写为regex、regexp或RE）使用单个字符串来描述、匹配一系列符合某个句法规则的字符串搜索模式。搜索模式可用于文本搜索和文本替换。

2.语法

test() 方法用于检测一个字符串是否匹配某个模式，如果字符串中含有匹配的文本，则返回 true，否则返回 false。

/*n+ 匹配任何包含至少一个 n 的字符串。
n* 匹配任何包含零个或多个 n 的字符串。
n? 匹配任何包含零个或一个 n 的字符串。*/

var reg = /kaikeba/i;
var res=reg.test("开课吧的汉语拼音为kaikeba");
console.log(res);//true


//以字母开头，文字在中间，数字结尾
var reg = /^[a-zA-Z]+[\u4e00-\u9fa5]*[0-9]$/;

var str="a公司拼音为9";
var res=reg.test(str);
console.log(res);//true
console.log(reg.test("a你好239"));//false

2 常用的正则表达式校验案例

<script>
	/*检查输入的身份证号是否正确*/
	function checkCard(str) {
		/*15位数身份证正则表达式:
		* 编码规则顺序从左至右依次为6位数字地址码，6位数字出生年份后两位及日期，3位数字顺序
		码。
		[1-9]\d{5} 前六位地区，非0打头
		\d{2} 出生年份后两位00-99
		((0[1-9])|(10|11|12)) 月份，01-12月
		(([0-2][1-9])|10|20|30|31) 日期，01-31天
		\d{3} 顺序码三位，没有校验码
		*/
		var arg1 = /^[1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-
		9]) | 10 | 20 | 30 | 31)\ d {
		3
	}
	$ / ;
	if(arg1.length == 15 && !arg1.test(arg1)) {
		return false;
	}
	/*
	* 18位数身份证正则表达式:
	* 编码规则顺序从左至右依次为6位数字地址码，8位数字出生年份日期码，3位数字顺序码，1
	位数字校验码（可为x）。
	[1-9]\d{5} 前六位地区，非0打头
	(18|19|([23]\d))\d{2} 出身年份，覆盖范围为 1800-3999 年
	((0[1-9])|(10|11|12)) 月份，01-12月
	(([0-2][1-9])|10|20|30|31) 日期，01-31天
	\d{3}[0-9Xx]： 顺序码三位 + 一位校验码
	*/
	var arg2 = /^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2] [1 - 9]) | 10 | 20 | 30 | 31)\ d {
		3
	}[0 - 9 Xx] $ / ;
	if(arg2.length == 18 && !arg2.test(sfzhmcode)) {
		return false;
	}
	return true;
	}
	/*是否是小数*/
	function isDecimal(strValue) {
		var objRegExp = /^\d+\.\d+$/;
		return objRegExp.test(strValue);
	}
	/*校验是否中文名称组成 */
	function ischina(str) {
		var reg = /^[\u4E00-\u9FA5]{2,4}$/;
		return reg.test(str);
	}
	/*校验是否全由8位数字组成 */
	function isNum(str) {
		var reg = /^[0-9]{8}$/;
		return reg.test(str);
	}
	/*校验电话码格式 :座机和手机*/
	function isTelCode(str) {
		var reg = /^((0\d{2,3}-\d{7,8})|(1[345789]\d{9}))$/;
		return reg.test(str);
	}
	/*校验手机号*/
	function isPhoneNum(str) {
		//如果你要精确验证手机号码，那个你可以使用第一个正则。这是根据电信，移动，联通目前发
		行的号码来的。 验证比较精确。
		var reg = /^1[3|4|5|7|8][0-9]{9}$/;
		// 如果因为现有的号码不能满足市场需求，电信服务商会增大号码范围。所以一般情况下我们
		只要验证手机号码为11位， 且以1开头。
		var reg = /^^1[0-9]{10}$$/;
		return reg.test(str);
	}
	/*校验邮件地址是否合法 */
	function IsEmail(str) {
		var reg = /^\w+@[a-zA-Z0-9]{2,10}(?:\.[a-z]{2,4}){1,3}$/;
		return reg.test(str);
	}
	/*检查输入的URL地址是否正确 */
	function checkURL(str) {
		if(str.match(/http(s)?:\/\/[\w.]+[\w\/]*[\w.]*\??[\w=&\+\%]*/i) == null) {
			return false;
		} else {
			return true;
		}
	}
</script>

万万万万呀

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
JavaScript表单验证与正则表达式

表单经常需要做一些非空验证、长度验证、合法性验证等。<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>表单验证</title> <script> function validateName() { //所有的表单项元素都value属性 var name = document.getElementById("use
复制链接

扫一扫