正则表达式和表单验证

最新推荐文章于 2021-01-30 03:26:50 发布

夏虫语冰彡

最新推荐文章于 2021-01-30 03:26:50 发布

阅读量466

点赞数

文章标签：表单验证正则表达式验证邮箱和电话号码非空验证常用的正则表达式

本文链接：https://blog.csdn.net/qq_34283987/article/details/78005558

版权

表单验证：
1.非空验证
判断非空最好不要用trim()方法，不兼容，推荐使用正则表达式。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>提交表单</title>
        <script type="text/javascript">
            function trim (txt) {
                var afterText = txt.replace(/^\s*/,'').replace(/\s*$/,'');
                return afterText;
            }

            function login () {
                var uname = document.getElementById("username").value;
                var div1  = document.getElementById("div1");
                var form1 = document.getElementById("form1");
                if(trim(uname)==""){
                    //提示非空
                    div1.innerHTML = "<font color='red'>用户名不能为空</font>";
                }else{
                    //提交表单
                    form1.submit();
                }
            }

            window.onload = function(){
                var btn1 = document.getElementById("btn1");
                btn1.onclick = login;
            }
        </script>
    </head>
    <body>
        <h2>用户登录</h2>
        <div id="div1">

        </div>
        <form id="form1" action="登录成功.html" method="post"><!--get不会出现500内部服务器错误-->
            用户名<input type="text" name="username" id="username"/>
            <input type="button" name="btn1" id="btn1" value="登录" />
        </form>

    </body>
</html>

二、验证是否是数字

示例：

if(trim(uname)==""){
                    //提示非空
                    div1.innerHTML = "<font color='red'>商品数量不能为空</font>";
                }else if(isNaN(trim(uname))){
                    div1.innerHTML = "<font color='red'>商品数量必须为整数</font>";
                }else{
                    //提交表单
                    form1.submit();
                }

三、验证邮箱

示例：

function isMail (email) {
                var regExp = /^\d{5,10}@\w+\.(com|net|org)$/;
                var flag = regExp.test(email);
                return flag;
            }

四、验证手机号
示例：

    function isPhone (phone) {
                var regExp = /^(15[0-3]{1}|18[0-9]{1}|13[0-9]{1})\d{8}$/;
                var flag = regExp.test(phone);
                return flag;
            }

综合起来，使用正则表达式实现用户注册页面：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            #form1{
                /*font-family: "楷体";*/
                font-family: "微软雅黑";
                font-style: normal;
            }

            label {
                width: 10em;
                display: inline-block;
            }

            #div1{
                color: red;
            }
            span.error {
                color: red;
                background: url(imgs/unchecked.gif) no-repeat 3px center;
                padding-left: 20px;
            }

            span.success {
                background: url(imgs/checked.gif) no-repeat 3px center;
                padding-left: 20px;
            }

            #username[value],#pwd[value],#phone[value],#mail[value],#pwd2[value]{
                opacity: 0.5;
            }

        </style>

        <script src="../jsJava库/hashMap.js" type="text/javascript" charset="utf-8"></script>

        <script type="text/javascript">
            var regBtn;
            var uname ;
//          var errMsg = "<img src='imgs/unchecked.gif'/>用户名不正确";
//          var successMsg = "<img src='imgs/checked.gif'/>";
            var form1;
            var span1;
            var pwd;
            var span2;
            var mail;
            var span3;
            var phone;
            var span4;
            var pwd2;
            var span5;
            var map1 = new HashMap();
            var beijing = ['海淀区','大兴区','朝阳区','丰台区'];
            var shanxi = ['太原','大同','晋中','吕梁'];
            var henan = ['郑州','开封','洛阳'];
            map1.put('北京',beijing);
            map1.put('山西',shanxi);
            map1.put('河南',henan);


            var provns = map1.keyArr;
            var citys;


            function trim (txt) {
                var afterTxt = txt.replace(/^\s*/,'').replace(/\s*$/,'');
                return afterTxt;
            }

            function mouseIn () {
                uname.value="";
                unameYanzheng();
            }

            function mouseOut () {
                unameYanzheng();
            }

            function unameYanzheng () {
                span1.innerHTML = "";
                if(uname.value=="请输入用户名"){
                    //不能不输入
                    span1.innerHTML = "用户名不正确";
                    span1.className = "error";

                }else if(trim(uname.value)==""){
                    span1.innerHTML = "用户名不能为空";
                    span1.className = "error";
                }else if(trim(uname.value).length<6){
                    span1.innerHTML = "用户名长度至少6个字符";
                    span1.className = "error";
                }else{
                    span1.className = "success";
//                  form1.submit();
                }
            }

            function mouseIn2 () {
                pwd.value="";
                pwd.type="password";
                pwdYanzheng();
            }

            function mouseOut2 () {
                pwdYanzheng();
            }

            function pwdYanzheng () {
                span2.innerHTML = "";
                if(pwd.value=="请输入密码"){
                    //不能不输入
                    span2.innerHTML = "密码不正确";
                    span2.className = "error";

                }else if(trim(pwd.value)==""){
                    span2.innerHTML = "密码不能为空";
                    span2.className = "error";
                }else if(trim(pwd.value).length<6||trim(pwd.value).length>20){
                    span2.innerHTML = "密码长度6-20个字符";
                    span2.className = "error";
                }else{
                    span2.className = "success";
//                  form1.submit();
                }
            }

            function mouseIn5 () {
                pwd2.value="";
                pwd2.type="password";
                pwd2Yanzheng();
            }

            function mouseOut5 () {
                pwd2Yanzheng();
            }

            function pwd2Yanzheng () {
                span5.innerHTML = "";
                if(pwd2.value=="请输入密码"){
                    //不能不输入
                    span5.innerHTML = "密码不正确";
                    span5.className = "error";

                }else if(trim(pwd2.value)==""){
                    span5.innerHTML = "密码不能为空";
                    span5.className = "error";
                }else if(trim(pwd2.value).length<6||trim(pwd2.value).length>20){
                    span5.innerHTML = "密码长度6-20个字符";
                    span5.className = "error";
                }else if(trim(pwd2.value)!=trim(pwd.value)){
                    span5.innerHTML = "两次输入密码不一致";
                    span5.className = "error";  
                }else{
                    span5.className = "success";
//                  form1.submit();
                }
            }

            function mouseIn3 () {
                mail.value="";
                mailYanzheng();
            }

            function mouseOut3 () {
                mailYanzheng();
            }

            function isMail (email) {
                var regExp = /^\d{5,10}@\w+\.(com|net|org)$/;
                var flag = regExp.test(email);
                return flag;
            }

            function mailYanzheng () {
                span3.innerHTML = "";
                if(mail.value=="请输入邮箱"){
                    //不能不输入
                    span3.innerHTML = "邮箱格式不正确";
                    span3.className = "error";

                }else if(trim(mail.value)==""){
                    span3.innerHTML = "邮箱格式不能为空";
                    span3.className = "error";
                }else if(!isMail(trim(mail.value))){
                    span3.innerHTML = "邮箱格式不正确";
                    span3.className = "error";
                }else{
                    span3.className = "success";
                }
            }

            function mouseIn4 () {
                phone.value="";
                phoneYanzheng();
            }

            function mouseOut4 () {
                phoneYanzheng();
            }

            function isPhone (phone) {
                var regExp = /^(15[0-9]{1}|18[0-9]{1}|13[0-9]{1})\d{8}$/;
                var flag = regExp.test(phone);
                return flag;
            }

            function phoneYanzheng () {
                span4.innerHTML = "";
                if(phone.value=="请输入手机号"){
                    //不能不输入
                    span4.innerHTML = "手机号格式不正确";
                    span4.className = "error";

                }else if(trim(phone.value)==""){
                    span4.innerHTML = "手机号不能为空";
                    span4.className = "error";
                }else if(!isPhone(trim(phone.value))){
                    span4.innerHTML = "手机号格式不正确";
                    span4.className = "error";
                }else{
                    span4.className = "success";
                }
            }

            function yanzheng () {
                uname.onblur();
                pwd.onblur();
                mail.onblur();
                phone.onblur();

                //通过span的 error属性 的个数 判断有没有错误的信息
                var errorSpanArr = document.getElementsByClassName("error");

                if(errorSpanArr.length>0){//有错误的信息
                    //不提交表单
//                  regBtn.disabled = "disabled";
alert('请正确填写信息！');
                }else{
//                  regBtn.disabled ="";
                    //提交表单
                    form1.submit();
                }

            }

            window.onload = function(){
                regBtn = document.getElementById("regBtn");
                form1 = document.getElementById("form1");
                //用户名
                uname = document.getElementById("username");
                span1 = uname.nextSibling;
                uname.onfocus = mouseIn;
                uname.onblur = mouseOut;
                uname.onkeyup = unameYanzheng;

                //密码
                pwd = document.getElementById("pwd");
                span2 = pwd.nextSibling;
                pwd.onfocus = mouseIn2;
                pwd.onblur = mouseOut2;
                pwd.onkeyup = pwdYanzheng;

                //确认密码
                pwd2 = document.getElementById("pwd2");
                span5 = pwd2.nextSibling;
                pwd2.onfocus = mouseIn5;
                pwd2.onblur = mouseOut5;
                pwd2.onkeyup = pwd2Yanzheng;

                //邮箱
                mail = document.getElementById("mail");
                span3 = mail.nextSibling;
                mail.onfocus = mouseIn3;
                mail.onblur = mouseOut3;
                mail.onkeyup = mailYanzheng;

                //手机号
                phone = document.getElementById("phone");
                span4 = phone.nextSibling;
                phone.onfocus = mouseIn4;
                phone.onblur = mouseOut4;
                phone.onkeyup = phoneYanzheng;

                //进入网页，就验证，有错不能点注册
//              yanzheng();
                regBtn.onclick = yanzheng;

                var provnsNode = document.getElementById("provinces");
                var provn;
                var provnTextNode;
                for(var i in provns){
                    provn = document.createElement("option");
                    provnTextNode = document.createTextNode(provns[i]);
                    provn.appendChild(provnTextNode);
                    provnsNode.appendChild(provn);
                }

            }

            function selectProvinces (obj) {
                var opt = obj.options[obj.selectedIndex];
                var cityNode = document.getElementById("citys");
                //删除已添加结点，然后重新添加
                cityNode.length=0;
                var city ;
                var cityTextNode ;
                for(var i in provns){
                    if(opt.text==provns[i]){
                        citys = map1.get(provns[i]);
                        for(var j in citys){
                            city = document.createElement("option");
                            cityTextNode = document.createTextNode(citys[j]);
                            city.appendChild(cityTextNode);
                            cityNode.appendChild(city);
                        }
                    }
                }

            }
        </script>

    </head>
    <body>
        <fieldset id="fieldset1">
            <legend>用户注册</legend>
            <form id="form1" action="handle.html" method="post">

            <label for="username">用户名</label>*&emsp;<input type="text" name="username" id="username" value="请输入用户名" /><span></span><br/>
            <label for="pwd">密&emsp;码</label>*&emsp;<input type="text" name="pwd" id="pwd" value="请输入密码" /><span></span><br/>
            <label for="pwd2">确认密码</label>*&emsp;<input type="text" name="pwd2" id="pwd2" value="请确认密码" /><span></span><br/>
            <label for="mail">邮&emsp;箱</label>*&emsp;<input type="text" name="mail" id="mail" value="请输入邮箱" /><span></span><br/>
            <label for="phone">手机号</label>*&emsp;<input type="text" name="phone" id="phone" value="请输入手机号" /><span></span><br/>
            <label for="provinces">请选择您的居住地--</label><br/>
            省：
            <select id="provinces" onchange="selectProvinces(this);">
                <option value="" selected="selected">请选择</option>
            </select>
            市：
            <select id="citys" >
                <option value="" selected="selected">请选择</option>
            </select>
            <br/>
            <br/>
            <div id="div1">
                * 为必填项。
            </div><br/>
            <input id="regBtn" type="button" value="注册"/>

            </form>
        </fieldset>

    </body>
</html>

看了这么多正则表达式在现实中的应用，现在了解一下基本的正则表达式知识。

在js中，正则表达式以 /正则表达式/ 存在。
^以…开始； $以…结束； \s空白、空格、tab、回车； *贪婪模式，最大限度的匹配字符串； \w 表示字符word ; . 表示转义 . ; \d 表示数字digit ;{5,10} 表示数量5-10个；+ 表示一个或多个； ? 表示0个或1个 ; {5} 表示5个， {5，} 表示 5个或5个以上； [0,9] 表示范围0-9

还有很多正则表达式：
例：20个常用的正则表达式

这里写图片描述

夏虫语冰彡

关注

0
点赞
踩
0

收藏

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

表单验证： 1.非空验证判断非空最好不要用trim()方法，不兼容，推荐使用正则表达式。<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>提交表单</title> <script type="text/javascript"> function
复制链接

扫一扫