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>