利用正则表达式对form表单进行验证

最新推荐文章于 2023-09-14 10:32:06 发布
最新推荐文章于 2023-09-14 10:32:06 发布
阅读量1.9k 收藏 13
点赞数 2
分类专栏： JS 文章标签： css 前端 js 正则表达式 javascript
ik
本文链接：https://blog.csdn.net/weixin_46104934/article/details/121599159
版权

在登录注册时，为了我们账户的安全，往往需要进行邮箱格式、手机号格式、密码的一致性进行验证，才能进行注册登录。
下面是手机号，邮箱，密码等的正则表达式：

> 手机号正则：/^(?:(?:\+|100)86)?1[3-9]\d{9}$/ 
> 或者：/^( ? (?:\+|100)86)?1\d{10}$/

账号正则：
/^[A-Za-z0-9]+$/

邮箱正则：
/^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/

密码强度正则：最少6位，包括至少1个大写字母，1个小写字母，1个数字，1个特殊字符 。
/^.*(?=.{6,})(?=.*\d)(?=.*[A-Z])(?=.*[a-z])(?=.*[!@#$%^&*? ]).*$/

知道了这些简单的正则表达式，我们才能更好的实现登录注册功能
下面是登录注册验证账号、密码、手机号等的格式的图：在这里插入图片描述
登录注册的HTML代码：

  <div class="register">
        <form action="#" name="regform" method="post">
            <p>
                用户注册
            </p>
            <!--				
				用户名-->
            <div class="username">
                <div class="pp">
                    <label>用 户 名</label>
                    <input name="user" id="txt-name" placeholder="你的账户名与登录名" />
                </div>
            </div>
            <div id="Username">
                <span id="tip-name">*用户名为8-12字母或数字(不能使用数字开头)</span>
            </div>
            <!--密码-->
            <div class="password">
                <div class="pp">
                    <label>设置密码</label>
                    <input name="pass" id="txt-pwd" placeholder="建议使用两种字符组合" />
                </div>
            </div>
            <div id="Password">
                <span id="tip-pwd">*密码为6位数字</span>
            </div>
            <!--	确定密码-->
            <div class="password-determine">
                <div class="pp">
                    <label>确定密码</label>
                    <input name="rpass" id="txt-pwd1" placeholder="请再次输入密码" />
                </div>
            </div>

            <div id="Rpass">
                <span id="tip-pwd1">*两次输入的密码不一致</span>
            </div>

            <!--手机号-->

            <div class="photo">
                <div class="pp">
                    <label>
							<select >
							   <option>中国 +86</option>
						    </select>
						</label>
                    <input name="rphoto" id="txt-tel" maxlength="11" placeholder="请输入手机号" οnblur="photo()" /><span></span>
                </div>
            </div>
            <div id="p4rphoto">
                <span id="tip-tel">*手机号码不正确</span><br>
            </div>
            <!--邮箱验证-->
            <div class="email">
                <p>或
                    <a href="">邮箱验证</a>
                </p>
            </div>
            <!--  手机验证-->

            <div class="verification-code">
                <div class="pp">
                    <label>
							手机验证码
						</label>
                    <input name="p-verification" placeholder="请输入验证码" />
                    <button style="background-color:Azure;">获取验证码</button>
                </div>
            </div>
            <!--	按钮-->
            <div class="btn">
                <input type="checkbox" id="cbx">
                <p>同意<a href="">《xxxxx注册协议》</p>		
			</a>
            </div>
            <div class="submit">
                <input type="submit" value="立即注册" class="register-immediately" disabled id="btn-sub" οnclick="return filter()">
            </div>
        </form>
    </div>

CSS代码：

body {
    font-size: 18px;
    font-family: "微软雅黑";
    background: url(../img/timg.jpg) no-repeat top center;
    color: #FFF;
}

form,
p {
    padding: 0;
    margin: 0;
    border: 0;
}

span {
    color: red;
    font-size: 5px;
    display: none;
}

form {
    width: 550px;
    height: 450px;
    padding-top: 10px;
    margin: 100px auto;
    /*使表单在浏览器中居中*/
    background: rgba(255, 255, 255, 0.1);
    /*为表单添加背景颜色*/
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

input {
    width: 130px;
    height: 30px;
    padding: 0 auto;
    margin-left: -50px;
}

p {
    margin-top: 6px;
    text-align: center;
}

.pp label {
    float: left;
    padding-left: 10px;
}

.pp input {
    border: none;
    outline: none;
    background: none;
    color: rgb(204, 204, 204);
}

.pp select {
    border: none;
    outline: none;
    background: none;
    font-size: 16px;
    margin-left: -5px;
    color: #FFFFFF;
    /*color: rgb(204, 204, 204);*/
}

.username {
    width: 310px;
    line-height: 40px;
    margin-left: 120px;
    margin-top: 20px;
    text-align: center;
    border-radius: 5px;
    display: inline-block;
    border: 1px solid rgba(255, 255, 255, 0.5);
}

#Username {
    width: 113px;
    height: 35px;
    float: right;
    margin-top: 25px;
    /*background-color: red;*/
}

.password {
    width: 310px;
    line-height: 40px;
    margin-left: 120px;
    margin-top: 20px;
    text-align: center;
    border-radius: 5px;
    display: inline-block;
    border: 1px solid rgba(255, 255, 255, 0.5);
}

#Password {
    width: 113px;
    height: 35px;
    float: right;
    margin-top: 25px;
    /*background-color: red;*/
}

.password-determine {
    width: 310px;
    line-height: 40px;
    margin-left: 120px;
    margin-top: 20px;
    text-align: center;
    border-radius: 5px;
    display: inline-block;
    border: 1px solid rgba(255, 255, 255, 0.5);
}

#Rpass {
    width: 113px;
    height: 35px;
    float: right;
    margin-top: 25px;
    /*background-color: red;*/
}

.photo {
    width: 310px;
    line-height: 40px;
    margin-left: 120px;
    margin-top: 20px;
    text-align: center;
    border-radius: 5px;
    display: inline-block;
    border: 1px solid rgba(255, 255, 255, 0.5);
}

#p4rphoto {
    width: 113px;
    height: 35px;
    float: right;
    margin-top: 25px;
    /*background-color: red;*/
}

.email {
    width: 100px;
    margin-left: 350px;
    /*display: inline-block;*/
    position: absolute;
}

.email p {
    margin: 0 auto;
    font-size: 10px;
}

.email a {
    text-decoration: none;
}

.verification-code {
    width: 310px;
    line-height: 40px;
    margin-left: 120px;
    margin-top: 20px;
    text-align: center;
    border-radius: 5px;
    border: 1px solid rgba(255, 255, 255, 0.5);
}

.verification-code button {
    width: 85px;
    height: 35px;
    float: right;
    border-radius: 5px;
    margin-top: 2px;
    position: absolute;
    font-family: charcoal;
    border: none;
}

.verification-code input {
    width: 90px;
}

.p-registered {
    width: 310px;
    height: 40px;
    background-color: red;
    margin-left: 120px;
    margin-top: 10px;
    border-radius: 5px;
    border: 1px solid rgba(255, 255, 255, 0.5);
}

.Sign-up-now p a {
    text-decoration: none;
    color: beige;
}

.btn {
    width: 210px;
    font-size: 12px;
    height: 20px;
}

#cbx {
    height: 15px;
    margin-left: 63px;
}

.btn p {
    float: left;
    width: 180px;
    margin-left: 115px;
    margin-top: -20px;
}

.btn a {
    text-decoration: none;
}

.submit input {
    width: 310px;
    height: 40px;
    font-size: 18px;
    color: #F5F5DC;
    background-color: red;
    margin-left: 120px;
    margin-top: 10px;
    border-radius: 5px;
    border: 1px solid rgba(255, 255, 255, 0.5);
}

JS验证代码：


  <script>
        var cbx = document.getElementById('cbx'); //协议
        var btn = document.getElementById('btn-sub');
        var txtName = document.getElementById('txt-name');
        var tipName = document.getElementById('tip-name');
        var txtPwd = document.getElementById('txt-pwd');
        var tipPwd = document.getElementById('tip-pwd');
        var txtPwd1 = document.getElementById('txt-pwd1');
        var tipPwd1 = document.getElementById('tip-pwd1');
        var txtPhone = document.getElementById('txt-tel');
        var tipPhone = document.getElementById('tip-tel');

        setCbx(cbx); //页面加载时，根据复选框状态设置按钮状态
        //复选框改变事件
        cbx.onchange = function() {
            setCbx(this);
        };
        //设置复选框
        function setCbx(obj) {
            //判断，若为勾中状态，则提交按钮可用
            if (obj.checked) {
                btn.className = 'two';
                btn.disabled = false;
            } else {
                btn.className = 'one';
                btn.disabled = true;
            }
        }
        //校验表单数据
        function filter() {
            return filterUserName() && filterPwd() && filterTel();
            //分别校验 用户名、密码、手机号
            window.open("index.html")
        }
        //校验用户名
        function filterUserName() {
            var sName = txtName.value;
            var p = /^[a-zA-Z]\w{7,11}$/;
            //校验不通过
            if (!p.test(sName)) {
                tipName.style.display = 'inline-block';
                txtName.focus(); //获取焦点				
                return false;
            }
            return true;
        }
        //校验密码
        function filterPwd() {
            var pwd = txtPwd.value; //读取输入框值
            var p = /^.*(?=.{6,})(?=.*\d)(?=.*[A-Z])(?=.*[a-z])(?=.*[!@#$%^&*? ]).*$/;

            var pwd1 = txtPwd1.value;
            //校验密码
            if (!p.test(pwd)) {
                tipPwd.style.display = 'inline-block';
                txtPwd.focus();
                return false;
            }
            //两次密码是否一致
            if (pwd != pwd1) {
                tipPwd1.style.display = 'inline-block';
                txtPwd1.focus();
                return false;
            }
            return true;
        }
        //校验手机号
        function filterTel() {
            var tel = txtPhone.value;
            var p = /^( ? (?:\+|100)86)?1\d{10}$/;
            if (!p.test(tel)) {
                tipPhone.style.display = 'inline-block';
                txtPhone.focus();
                return false;
            }
            return true;
        }
    </script>
ik i5
关注
  • 2
    点赞
  • 踩
  • 13
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript通过正则表达式实现表单验证电话号码
12-01
JavaScript表单验证电话号码，判断一个输入量是否为电话号码，通过正则表达式实现。 代码如下: //检查电话号码 function isTel(str){ var reg=/^([0-9]|[\-])+$/g ; if(str.length18){ return false; } else{ return reg.exec(str); } }
用JavaScrip正则表达式验证form表单的方法
10-19
主要介绍了用JavaScrip正则表达式验证form表单的方法,需要的朋友可以参考下
表单验证正则表达式
weixin_44387746的博客
10-29 634
1、用户名正则 //用户名正则，4到16位（字母，数字，下划线，减号） varuPattern = /^[a-zA-Z0-9_-]{4,16}$/; //输出 true console.log(uPattern.test("caibaojian")); 2、密码强度正则 //密码强度正则，最少6位，包括至少1个大写字母，1个小写字母，1个数字，1个特殊字符 varpPattern = /^.*...
vue element-ui的form表单校验总结，动态校验、自定义校验（用正则校验手机号码、数字、url、中文）
最新发布
TangMonk的博客
09-14 2081
data() {return {//在rules属性填写相关字段的校验规则rules: {{ required: true, message: "必填" },{ min: 6, max: 18, message: '长度在 6 到 18 个字符', trigger: 'blur' }],email:[{ type: 'email', message: '请输入正确的邮箱地址', trigger: 'change' }],//自定义校验name:[
Element form表单自定义校验规则之正则校验
newbaby123的博客
12-27 2216
自定义校验手机号 // 验证手机号的自定义规则 var checkMoblie = (rule, value, cb) => { //验证手机号的正则表达式 const regMobile = /^1(3[0-9]|4[01456879]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[0-35-9])\d{8}$/ if (regMobile.test(value)) { //合法的手机号
Form 表单常用正则验证 （收藏）
weixin_33670713的博客
06-04 504
1。^\d+$　　//匹配非负整数（正整数 + 0）2。^[0-9]*[1-9][0-9]*$　　//匹配正整数3。^((-\d+)|(0+))$　　//匹配非正整数（负整数 + 0）4。^-[0-9]*[1-9][0-9]*$　　//匹配负整数5。^-?\d+$　　　　//匹配整数6。^\d+(\.\d+)?$　　//匹配非负浮点数（正浮点数 + 0）7。^(([0-9]+\.[0-...
Form 表单电话格式正则验证
qq_38865642的博客
11-18 229
form 电话格式的正则验证
element——form表单规则验证总结
xiaoququ的博客
01-19 1740
【代码】element——form表单规则验证总结。
Js表单 form 正则表达式
weixin_40746230的博客
05-25 330
Js表单 form 正则表达式
form表单输入正则校验
Merlin2017的博客
09-06 1346
form表单输入正则校验 <el-form slot="dialog-content" class="dialogContent" :model="userForm" :rules="userRules" ref="addRuleForm" style="list-style: none; display: flex; flex-wrap: wrap; justify-content: space-between; position: relative" > <el-form
正则表达式总结-form表单
01-27
总结了form表单，以及部分正则表达式，正则表达式很多，只总结了部分常用的
javascript使用正则表达式实现注册登入校验
01-18
本文实例为大家分享了用正则表达式的方式实现注册登入的校验，供大家参考，具体内容如下 表单验证： 1、用户名：6–18位数字,字母,下划线_，文本域获取焦点和失去焦点出现提示文字。 2、登入密码：请输入6–20位数字,字母,任意字符，文本域获取焦点和失去焦点出现提示文字。（效果同上） 3、确认密码：内容与登入密码必须一致。 4、姓名：2-5位中文字。 5、身份证号：开头为1234568，中间16位为数字，结尾为数字或Xx。 6、邮箱：常规验证如下 7、手机号：为1开头是11位数字 8、提交是验证为一项是否填写正确，并弹框提示。 确认已阅读选项是否选中，并弹框提示。 页面效果： 1、提交是验证为
匹配form表单中所有内容的正则表达式
01-21
想写一个正则表达式匹配整个form表单，包括form标签，是html文件里面的内容。 首先想到的是： 代码如下: <form .*</form> 这样子： 代码如下: <form [^>]*/form> 还有这样子： 代码如下: <...
正则表达式和表单验证
08-19
内有数字、匹配字母或数字或下划线或汉字 、匹配数字、一种是三位区号，8位本地号(如010-12345678)、IP地址、手机号
箭头函数与this指向详解
web$-小白
07-16 3028
箭头函数以及箭头函数中this的指向问题
JS函数柯里化
web$-小白
08-05 2538
柯里化 JS
JS中的闭包
web$-小白
08-01 2188
闭包
JS封装防抖(代码持续优化)
web$-小白
08-08 1271
JS封装防抖节流
js正则表达式注册页面表单验证
06-07
好的，我可以帮你介绍一下使用正则表达式进行注册页面表单验证的方法。 首先，我们需要使用 JavaScript 来实现这个功能。以下是一个基本的表单验证代码示例： ```html <form id="registerForm"> <label for="username">用户名：</label> <input type="text" id="username" name="username"><br> <label for="password">密码：</label> <input type="password" id="password" name="password"><br> <label for="email">邮箱：</label> <input type="email" id="email" name="email"><br> <input type="submit" value="注册"> </form> <script> var form = document.getElementById("registerForm"); form.addEventListener("submit", function(event) { var username = form.username.value; var password = form.password.value; var email = form.email.value; // 在这里添加表单验证的代码 event.preventDefault(); }); </script> ``` 在表单提交事件中，我们获取了三个表单元素的值：用户名、密码、邮箱。接下来，我们可以使用正则表达式对这些值进行验证。 以下是一些常用的正则表达式验证规则： - 用户名：只能包含字母、数字和下划线，长度在 5 到 20 个字符之间。 ```javascript var usernameRegex = /^[a-zA-Z0-9_]{5,20}$/; if (!usernameRegex.test(username)) { alert("用户名格式不正确"); } ``` - 密码：只能包含字母、数字和特殊字符（例如 !@#$%^&*），长度在 6 到 20 个字符之间。 ```javascript var passwordRegex = /^[a-zA-Z0-9!@#$%^&*]{6,20}$/; if (!passwordRegex.test(password)) { alert("密码格式不正确"); } ``` - 邮箱：必须符合邮箱格式。 ```javascript var emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/; if (!emailRegex.test(email)) { alert("邮箱格式不正确"); } ``` 如果验证不通过，我们可以使用 `alert` 或者其他方法提示用户输入格式不正确。如果验证通过，我们可以继续执行表单提交操作。 希望这个示例可以对你有所帮助！

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值