表单校验及正则表达式

表单验证的作用:

     减轻服务器的压力

     保证输入的数据符合要求

常用的表单验证

    日期格式

    表单元素是否为空

    用户名和密码

    email地址

    身份证号码

表单选择器用于选取某些特定的表单元素

   常用的表单选择器

         input:text匹配所有单行文本框/password匹配所有密码框/radio:匹配所有单项按钮/

                   checkbox:匹配所有复选框/submit:匹配所有提交按钮/imag:匹配所有图像域/

                   reset匹配所有重置按钮/button匹配所有按钮/file匹配所有文本域

                   hidden:匹配所有不可见元素

  属性过滤选择器

         enabled:匹配所有可用元素/disabled:匹配所有不可见元素/checked:匹配所有被选中元素

        selected:匹配所有选中的option元素

        非空验证

           示例:if (mail == "") {

                           alert("Email不能为空");

                           return false;

                      }

  字符串查找        indexOf():查找某个指定的字符串值在字符串中首次出现的位置

        示例:var str="this is JavaScript";

                  var selectFirst=str.indexOf("Java");   --返回8

                  var selectSecond=str.indexOf("Java",12);   --返回-1

  长度验证

   示例:    

           if(pwd.length<6){

             alert("密码必须等于或大于6个字符");

             return false;

         }

 判断字符串是否有数字

      使用for循环和substring()方法依次截取单个字符在判断每个字符是否是数字

      示例:

           for (var i = 0; i < user.length; i++) {

              var j = user.substring(i, i + 1);

            if (isNaN(j) == false) {

               alert("姓名中不能包含数字");

             return false;

             }

          }

  表单验证事件和方法

   表单验证需要综合运用元素的事件和方法

       

类别

名称

描述

事件

onblur

失去焦点,当光标离开某个文本框时触发

onfocus

获得焦点,当光标进入某个文本框时触发

方法

blur()

从文本域中移开焦点

focus()

在文本域中设置焦点,即获得鼠标光标

select()

选取文本域中的内容,突出显示输入区域的内容

  正则表达式的作用:

   简洁的代码

   严谨的验证文本框中的内容

   生产环境中更为常用的方式
  示例:验证邮箱
           var reg= /^w+@w+(.[a-zA-Z]{2,3}){1,2}$/;

             if(reg.test(email) ==false){ 

                 $email_prompt.html("电子邮件格式不正确,请重新输入");

            return false;

          }

    普通方式

         语法:var reg=/表达式/附加参数;

         示例:var reg=/white/;

                    var reg=/white/g;

    构造函数

         语法:var reg=new RegExp("表达式","附加参数");

         示例:

               var reg=new RegExp("white");

               var reg=new RegExp("white","g");

    简单模式      --只能表示具体的匹配

        示例:

           var reg=/china/;

           var reg=/abc8/;

   复合模式       --可以使用通配符表达更为抽象的规则模式

       示例:

           var reg=/^w+$/;

           var reg=/^w+@w+.[a-zA-Z]{2,3}(.[a-zA-Z]{2,3})?$/;

RegExp对象

  属性

global

RegExp对象是否具有标志g,表示全局匹配

ignoreCase

RegExp对象是否具有标志i,表示不区分大小写

multiline

RegExp对象是否具有标志m,表示多行匹配

   方法

方法

描述

exec( )

检索字符中是正则表达式的区配,返回找到的值,并确定其位置

test( )

检索字符串中指定的值,返回true或false

  String对象方法

方法

描述

exec( )

检索字符中是正则表达式的区配,返回找到的值,并确定其位置

test( )

检索字符串中指定的值,返回true或false

     正则表达式符号

   

符号

描述

/…/

代表一个模式的开始和结束

^

匹配字符串的开始

$

匹配字符串的结束

s

任何空白字符

S

任何非空白字符

d

匹配一个数字字符,等价于[0-9]

D

除了数字之外的任何字符,等价于[^0-9]

w

匹配一个数字、下划线或字母字符,等价于[A-Za-z0-9_]

W

任何非单字字符,等价于[^a-zA-z0-9_]

.

除了换行符之外的任意字符

符号

描述

{n}

匹配前一项n次

{n,}

匹配前一项n次,或者多次

{n,m}

匹配前一项至少n次,但是不能超过m次

*

匹配前一项0次或多次,等价于{0,}

+

匹配前一项1次或多次,等价于{1,}

匹配前一项0次或1次,也就是说前一项是可选的,等价于{0,1}

原文地址:https://www.cnblogs.com/cy7533649/p/13246635.html