JS正则表达式，表单验证（一）

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

南宫廿贰

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

阅读量539

点赞数 2

分类专栏： JavaScript 文章标签：正则表达式

本文链接：https://blog.csdn.net/weixin_43330884/article/details/102520357

版权

JavaScript 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

正则表达式

如图所示： 在这里插入图片描述
一.先附上一部分代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>正则表达式验证</title>
	</head>
	<script src="js/verify.js"></script>
    <script>
        function verify() {
            //用户名校验
            var name1 = /^[A-Z][0-9A-Za-z_][a-zA-Z0-9_]{5,19}$/;
            rag("name",name1);
            //密码
            var pwd1 = /^[A-Z][A-Za-z0-9]\w{7,14}.{1,20}$/;
            rag("pwd",pwd1);
            //确认密码
            var confirmPwd1 = /^[A-Z][A-Za-z0-9]\w{7,14}.{1,20}$/;
            rag("confirmPwd",confirmPwd1);
            //邮箱
            var email1 = /^[A-z0-9]+@[a-z0-9]+.com$/;
            rag("email",email1);
            //手机号
            var phone1 = /^1([38][0-9]|4[579]|5[0-3,5-9]|6[6]|7[0135678]|9[89])\d{8}$/
            rag("phone",phone1);
            //身份证号
            var eID1 = /(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
            rag("eID",eID1);
            //地址
            var address1 = /^[\u4E00-\u9FA50-9A-Za-z\u4E00-\u9FA5]+$/;
            rag("address",address1);
        }
    </script>
	<body>
		<table align="center" border="1" style="border-collapse: collapse;">
			<tr>
				<td>用户名:</td>
				<td><input type="text" id="name" /><span id="nameResult" style="font-size: 24px"></span></td>
			</tr>
			<tr>
				<td>密码:</td>
				<td><input type="text" id="pwd" /><span id="pwdResult" style="font-size: 24px"></span></td>
			</tr>
			<tr>
				<td>确认密码:</td>
				<td><input type="text" id="confirmPwd" /><span id="confirmPwdResult" style="font-size: 24px"></span></td>
			</tr>
			<tr>
				<td>邮箱:</td>
				<td><input type="text" id="email" /><span id="emailResult" style="font-size: 24px"></span></td>
			</tr>
			<tr>
				<td>手机号:</td>
				<td><input type="text" id="phone" /><span id="phoneResult" style="font-size: 24px"></span></td>
			</tr>
			<tr>
				<td>身份证号:</td>
				<td><input type="text" id="eID" /><span id="eIDResult" style="font-size: 24px"></span></td>
			</tr>
			<tr>
				<td>地址:</td>
				<td><input type="text" id="address" /><span id="addressResult" style="font-size: 24px"></span></td>
			</tr>
			<tr>
				<td colspan="2" align="center"><input type="button" value="登录验证" onclick="verify()" /></td>
			</tr>
		</table>
		
	</body>
</html>

二.这里是封装的JS代码可以直接调用

/**
 * 输入框的校验
 * @param {Object} eleId
 * @param {Object} rule
 */
function rag(eleId,rule){
    var inputValue = document.getElementById(eleId).value;
    var result = rule.test(inputValue.trim());
    if (result) {
        document.getElementById(eleId + "Result").innerHTML = "✔";
        document.getElementById(eleId + "Result").style.color = "blue";
    } else {
        document.getElementById(eleId + "Result").innerHTML = "✘";
        document.getElementById(eleId + "Result").style.color = "red";
    }
}

当然这部分代码还可以优化，就是显示验证通过或者失败的代码
附上

var span = document.createElement("span");//创建一个dom元素
document.getElementById(eleId).parentElement.appendChild(span);

南宫廿贰

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
JS正则表达式，表单验证（一）

正则表达式如图所示：一.先附上一部分代码<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>正则表达式验证</title> </head> <script src="js/verify.js"></script...
复制链接

扫一扫

专栏目录