【JavaScript】表单效验

本章，主要掌握以下几个技能：
    1、掌握String对象的用法、
    2、会使用正则表达式验证页面输入的内容
    3、会使用表单选择器

1、String对象

    String 对象描述：
    字符串是 JavaScript 的一种基本的数据类型。
    String 对象的 length 属性声明了该字符串中的字符数。
    String 类定义了大量操作字符串的方法，例如从字符串中提取字符或子串，或者检索字符或子串。
    需要注意的是，JavaScript 的字符串是不可变的（immutable），String 类定义的方法都不能改变字符串的内容。像 String.toUpperCase() 这样的方法，返回的是全新的字符串，而不是修改原始字符串。

以上，仅作基本解释，更多详细介绍，查看这里


2、正则表达式

正则表达式的重要程度不言而喻，作为程序员，必须牢牢掌握！

那么，什么是正则表达式？正则表达式是一个描述字符模式的对象，它是由一些特殊的符号组成的。


定义正则表达式：

语法：

    //普通方式
    var reg = /表达式/附加参数

    表达式：一个字符串代表了某种规则，其中可以使用某些特殊字符来代表特殊的规则。
    附加参数：用来扩展表达式的含义：
    1.g：代表可以进行全局匹配
    2.i：代表不区分大小写匹配
    3.m：代表可以进行多行匹配
    以上参数可以任意组合，代表复合含义，也可以不加参数，例如：

    var reg = /white/;
    var reg = /thite/i;

    //构造函数
    var reg = new RegExp("表达式","附加参数");

    其中表达式与附加参数的含义与上面普通方式中定义的含义相同。例如：

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

    说明：普通方式中的表达式必须是一个常量字符串，而构造函数中的表达式可以是常量字符串，也可以是一个JavaScript变量。例如：根据用户输入作为表达式的参数：

    var reg = new RegExp($("#id").val(),"g");

表达式的模式：

1、简单模式：
    简单模式是指通过普通字符的组合来表达的模式：例如：

    var reg = /China/;
    var reg = /abc9/;

    简单模式只能表示具体的匹配，如果要匹配一个邮箱地址或一个电话号码，就不能使用具体的匹配，而是要用到复合模式。

2、复合模式
    复合模式就是指含有通配符来表达的模式

    //语法：
    var reg = /^\w+$/;

其中，+、\w、^和$都是通配符，代表特殊的含义。

了解了正则表达式的分类与模式，接下来了解正则表达式的使用方法：

RegExp对象:

RegExp对象
方法	描述
exec()	检索字符中是正则表达式的匹配，返回找到的值，并确定其位置
test()	检索字符串中指定的值，返回true或false

exec()方法：
    用于检索字符串中的正则表达式的匹配。
    语法：RegExpObject.exec(string)

    //示例：
<script type="text/javascript">

var str = "Visit W3School, W3School is a place to study web technology."; 
var patt = new RegExp("W3School","g");
var result;

while ((result = patt.exec(str)) != null)  {
  document.write(result);
  document.write("<br />");
  document.write(patt.lastIndex);
  document.write("<br />");
 }
</script>

//输出
W3School
14
W3School
24

详细介绍，查看这里

text()方法：
    用于检测一个字符串是否匹配某个模式
    语法：RegExpObject.test(string)
    如果字符串中含有与正则表达式匹配的文本，则返回true，否则返回false

    //示例
    var str = "my cat";
    var reg = /cat/;
    var result = reg.test(str);
    //result的值为true

JavaScript除了支持RegExp对象的正则表达式方法外，还支持String对象的正则表达式方法。

String对象的方法

String对象的方法
方法	描述
match()	找到一个或多个正则表达式的匹配
search()	检索与正则表达式相匹配的值
replace()	替换与正则表达式匹配的字符串
split()	把字符串分割为字符串数组

    match()方法：
    match()方法可以在字符串内检索指定的值，找到一个或多个正则表达式的匹配。

    //语法：
    StringObject.match(searchString或RegExpObject)

searchString是要检索的字符串的值，regExpObject是规定要匹配模式的RegExp对象。

     //示例
     var str = "my cat";
     var reg = /cat/;
     var result = str.match(reg);
     //运行上述代码，result的值为cat。

replace()方法

replace()方法用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的字符。

语法：
StringObject.replace(RegExpObject或String,"替换的字符串")

如果设置了全文搜索则符合条件的RegExp或字符串都将被替换，否则只替换一个，返回替换后的字符串。

    //示例
    var str "a b c d a b c d"
    var result1=str.replace(/f/,"a");
    var result2=str.replace(/f/g,"a");

    //输出结果
    result1 = "f b c d a b c d"  //替换了第一个a
    result2 = "f b c d f b c d"  //替换了所有a

split()方法

split()方法将字符串分割成一系列子字符串并通过一个数组将这一系列子字符串返回。

语法：
StringObject.split(分割符,n);
分割符可以是字符串，也可以是正则表达式。n为限制输出数组的个数，为可选项，如果不设置n，则返回包含整个字符串的元素数组。

    //示例
    <script type="text/javascript">
    var str="How are you doing today?"
    document.write(str.split(" ") + "<br />")
    document.write(str.split(/\s+/) + "<br />")
    document.write(str.split(" ",3))
</script>

输出结果：
How,are,you,doing,today?
How,are,you,doing,today?
How,are,you

RegExp对象的属性

RegExp对象的属性
属性	描述
global	RegExp对象是否具有标志g（全局匹配）
ignoreCase	RegExp对象是否具有标志i（不区分大小写匹配）
multiline	RegExp对象是否具有标志m（多行匹配）

正则表达式常用符号

正则表达式常用符号
/../	代表一个模式的开始和结束
^	匹配字符串的开始
$	匹配字符串的结束
/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}

3.表单选择器

表单选择器
语法	描述	示例
:input	匹配所有input、textarea、select和button	$(“#myform :input”)选取表单中所有input、select和button元素
:text	匹配所有单行文本框	$(“#myform :text”)选取所有type为text的元素
:password	匹配所有密码框	$(“#myform :password”)选取type为password的元素
:radio	匹配所有单选按钮	$(“#myform :radio”)选取元素type为radio的元素
:checkbox	匹配所有复选框	$(“#myform :checkbox”)选取元素type为checkbox的元素
:submit	匹配所有提交按钮	$(“#myform :submit”)选取元素type为submit的元素
:image	匹配所有图像域	$(“#myform :image”)选取type为image的元素
:reset	匹配所有重置按钮	$(“#myform :reset”)选取type为reset的元素
:button	匹配所有按钮	$(“#myform :button”)选取type为button的元素
:file	匹配所有文件域	$(“#myform :file”)选取type为file的元素
:hidden	匹配所有不可见元素，或者type为hidden的元素	$(“#myform :hidden”)选取type为hidden的元素或者不可见的元素

表单属性过滤器

表单属性过滤器
语法	描述	示例
:enabled	匹配所有可用元素	$(“#myform :enabled”)
:display	匹配所有不可用元素	$(“#myform :display”)
:checked	匹配所有被选中元素（复选框、单项按钮、select中的option）	$(“#myform :checked”)
:selected	匹配所有的option元素	$(“#myform :option”)

完

资料来自w3School与课本。