用JavaScript中的正侧表达式实现输入框校验

最新推荐文章于 2021-06-29 09:56:12 发布

manhoho

最新推荐文章于 2021-06-29 09:56:12 发布

阅读量212

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/qq_45742386/article/details/102523611

版权

JavaScript 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

正侧表达式实现输入框校验：
输入框要求如下：

用户名: 大写字母开头 6-20位字符(不允许有符号但是允许有_)
密码:大写开头数字字母符号混合 8-15位
确认密码:大写开头数字字母符号混合 8-15位
邮箱:邮箱格式
手机号:手机号格式
地址: 中文开头数字字母中文混合

verify.html

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>输入框校验</title>
    <script src="verify.js"></script>
</head>
<body>
用户名：<br/><input type="text" id="name"/><span id="nameReg"></span><br/>
密码：<br/><input type="text" id="pwd"/><span id="pwdReg"></span><br/>
确认密码：<br/><input type="text" id="pwd2"/><span id="pwd2Reg"></span><br/>
邮箱：<br/><input type="text" id="mailbox"/><span id="mailboxReg"></span><br/>
手机号：<br/><input type="text" id="phone"/><span id="phoneReg"></span><br/>
地址：<br/><input type="text" id="address"/><span id="addressReg"></span><br/>
<input type="button" value="校验" onclick="btnClick()"/>
    <script type="text/javascript">
        function btnClick(){
            //用户名: 大写字母开头 6-20位字符(不允许有符号但是允许有_)
            var limitierName = /^[A-Z]\w{5,19}$/;
            reg("name",limitierName);
            //密码:大写开头 数字字母符号混合 8-15位
            var limitierPwd = /^[A-Z][\w\W]{7,14}$/;
            reg("pwd",limitierPwd);
            //确认密码:大写开头 数字字母符号混合 8-15位
            var limitierPwd2 = /^[A-Z][\w\W]{7,14}$/;
            reg("pwd2",limitierPwd2);
            //邮箱:邮箱格式
            var limitierMailbox = /^[A-z0-9]+@[a-z0-9]+.com$/;
            reg("mailbox",limitierMailbox);
            //手机号:手机号格式
            var limitierPhone = /^(13|15|17|18)\d{9}$/;
            reg("phone",limitierPhone);
            //地址: 中文开头  数字 - 字母 中文混合
            var limitierAddress = /^[\u4e00-\u9fa5][\u4e00-\u9fa5A-Za-z0-9]+$/;
            reg("address",limitierAddress);
        }
    </script>
</body>
</html>

verify.js

/**
 * Created by Administrator on 2019/10/12.
 */
/**
 * 输入框的校验  消息显示区域的ID 必须按照 eleId+"Reg"
 * @param eleId 输入框的ID
 * @param rule 正则表达式
 */
function reg(eleId,rule){
    var inputValue = document.getElementById(eleId).value;
    var result = rule.test(inputValue.trim());
    if(result){
        document.getElementById(eleId+"Reg").innerHTML="√";
        document.getElementById(eleId+"Reg").style.color= "green";
    }else{
        document.getElementById(eleId+"Reg").innerHTML="×";
        document.getElementById(eleId+"Reg").style.color= "red";
    }
}

manhoho

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
用JavaScript中的正侧表达式实现输入框校验

用正侧表达式设置输入框内容的格式：输入框要求如下：用户名: 大写字母开头 6-20位字符(不允许有符号但是允许有_)密码:大写开头数字字母符号混合 8-15位确认密码:大写开头数字字母符号混合 8-15位邮箱:邮箱格式手机号:手机号格式地址: 中文开头数字字母中文混合verify.html<!DOCTYPE html><html>&lt...
复制链接

扫一扫