zoukankan      html  css  js  c++  java
  • JavaScript——正则表达式

    什么是正则表达式:

        正则表达式是一个描述字符模式的对象
               定义正则表达式
               表达式的模式
    

    为什么需要正则表达式

          简洁的代码
          严谨的验证文本框的内容   
    

    为什么需要表单验证?

          减轻服务器的压力
          保证输入的数据符合要求
    

    什么地方需要表单验证?

          表单元素是否为空
          用户名和密码
          E-mail地址是否正确
          身份证号码等是否是数字
    

    表单验证思路,当输入的表单数据不符合要求时,如何编写脚本来进行提示?

          获取表单元素值
          使用JavaScript的一些方法对数据进行判断
          当表单提交时,对获取的数据进行验证
    

    定义正则表达式

          普通方式:var reg = /表达式/附加参数
    
          构造函数:var reg = new RegExp("表达式","附加参数")
                                    //附加参数也可不写
    

    RegExp对象

              RegExp对象的方法:
              - test:检索字符串中指定的指,返回true或false
              - exec:在字符串中执行匹配搜索,返回结果数组
    

    RegExp对象的属性

    模式修饰符参数:
              global :全局模式,应用于所有字符串
              ignoreCase :执行对大小写不敏感的匹配
              multiline :多行匹配模式
    

    String对象的方法

          match :找到一个或多个正则表达式的匹配
          search :检索与正则表达式匹配的值
          replaces :替换与正则表达式匹配的字符串
          split :把字符串分割为字符串数组
    

    以下部分为相关试验代码:

    正则表达式普通方式

    <script type="text/javascript">
        window.onload = function(){
            document.getElementById('form').onsubmit = function(){
                //提交监听事件
                //普通方式声明一个正则表达式
                //轻微级别验证,只要字符串中包含white即可
                //若white/i,则可以忽略大小写
                var reg = /white/;
                //使用构造函数声明一个正则表达式
            //    var reg = new RegExp('white');
                //验证输入框内容是否匹配
                var a = document.getElementById('a').value;
                if(reg.test(a)){
                    //验证通过
                    alert('验证通过');
                }else {
                    //验证失败
                    alert('验证失败');
                }
            }
        }
    </script>
    
    
    <body>
    <form id="form" action="" method="post">
       <!--文本输入框-->
        <input type="text" id="a"/>
        <input type="submit" value="登陆"/>
    </form>
    </body>

    String对象的方法

    <script type="text/javascript">
        window.onload = function(){
            document.getElementById('form').onsubmit = function(){
                //提交监听事件
                //普通方式声明一个正则表达式
                var reg = /a/i;
                //使用构造函数声明一个正则表达式
                //    var reg = new RegExp('white');
                //验证输入框内容是否匹配
                var a = document.getElementById('a').value;
                //使用正则可以忽略大小写,若使用split('a'),则无法忽略大小写
                //通过正则表达式规则去分割一个字符串
                var arr = a.split(reg);
                for(var i = 0; i < arr.length; i++){
                    alert(arr[i]);
                }
            }
        }
    </script>
    
    <body>
    <form id="form" action="" method="post">
        <!--文本输入框-->
        <input type="text" id="a"/>
        <input type="submit" value="登陆"/>
    </form>
    </body>

    replace

    <script type="text/javascript">
        window.onload = function(){
            document.getElementById('form').onsubmit = function(){
                //提交监听事件
                //普通方式声明一个正则表达式
                //附加参数i代表忽略大小写,g代表全局匹配
                var reg = /a/ig;
                //使用构造函数声明一个正则表达式
                //    var reg = new RegExp('white');
                var a = document.getElementById('a').value;
                var b = a.replace(reg,'b');
                //通过value属性修改输入框的值
                var input = document.getElementById('a');
                input.value = b;
            }
        }
    </script>
    
    
    <body>
    <form id="form" action="" method="post">
        <!--文本输入框-->
        <input type="text" id="a"/>
        <input type="submit" value="登陆"/>
    </form>
    </body>

    登录验证

    <script type="text/javascript">
       window.onload=function() {
          //获取表单项
          var email=document.getElementById('email');
          var pwd=document.getElementById('pwd');
          //表单提交监听事件
          document.getElementById('form').onsubmit=function() {
             //验证表单项
             //1.验证邮箱是否为空
             if(email.value=='') {
                alert('请输入邮箱');
                //2.验证邮箱是否正确
             } else if(email.value.indexOf('@')==-1) {
                alert('邮箱必须包含@');
             } else if(email.value.indexOf('.')==-1) {
                alert('邮箱必须包含.');
             } else if(pwd.value=='') {
                //3.验证密码是否为空
                alert('请输入密码');
             } else {
                alert('登录成功');
             }
             //阻止表单提交
             return false;
          }
       }
    </script>
    
    
    <body>
       <form id="form" action="" method="post">
          邮箱: <input type="text" id="email" />
          密码: <input type="password" id="pwd" />
          <input type="submit" value="登录"/>
       </form>
    </body>
  • 相关阅读:
    成为一名全栈工程师
    【DocFX文档翻译】DocFX 入门 (Getting Started with DocFX)
    SharePoint 2013 项目部署
    dynamics crm跳转到手机版本的页面
    Azure中block和Page的比较 Azure: Did You Know? Block vs Page Blobs
    斐讯k1路由器刷Breed BootLoader(不死UBoot)教程
    DynamicsCRM中的自动保存
    Migrating an ASP.NET MVC application to ADFS authentication
    说一下最近一个月的面试体会吧
    Boss直聘快速导出简历为PDF的方法
  • 原文地址:https://www.cnblogs.com/aixing/p/13327764.html
Copyright © 2011-2022 走看看