{"action":"opened","issue":{"url":"https://api.github.com/repos/FatliTalk/blog/issues/42","repository_url":"https://api.github.com/repos/FatliTalk/blog","labels_url":"https://api.github.com/repos/FatliTalk/blog/issues/42/labels{/name}","comments_url":"https://api.github.com/repos/FatliTalk/blog/issues/42/comments","events_url":"https://api.github.com/repos/FatliTalk/blog/issues/42/events","html_url":"https://github.com/FatliTalk/blog/issues/42","id":228457877,"number":42,"title":"JavaScript_3 表单验证之正则表达式","user":{"login":"FatliTalk","id":19491358,"avatar_url":"https://avatars1.githubusercontent.com/u/19491358?v=3","gravatar_id":"","url":"https://api.github.com/users/FatliTalk","html_url":"https://github.com/FatliTalk","followers_url":"https://api.github.com/users/FatliTalk/followers","following_url":"https://api.github.com/users/FatliTalk/following{/other_user}","gists_url":"https://api.github.com/users/FatliTalk/gists{/gist_id}","starred_url":"https://api.github.com/users/FatliTalk/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/FatliTalk/subscriptions","organizations_url":"https://api.github.com/users/FatliTalk/orgs","repos_url":"https://api.github.com/users/FatliTalk/repos","events_url":"https://api.github.com/users/FatliTalk/events{/privacy}","received_events_url":"https://api.github.com/users/FatliTalk/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":0,"created_at":"2017-05-13T08:16:29Z","updated_at":"2017-05-13T08:16:29Z","closed_at":null,"body":"> 本文重点：\r\n> - 了解什么是正则表达式\r\n> - 掌握常用的正则表达式\r\n> - 使用正则表达式作复杂的表单验证\r\n\r\n<br>\r\n\r\n# 正则表达式是什么 \r\n\r\n- 又称为正规表示法，常规表示法（英语： Regular Expression ，在代码中常简写为 regex 、 regexp 或 RE ），是计算机科学的一个概念。正则表达式使用单个字符串来描述、匹配一系列匹配某个句法规则的字符串。\r\n- 一个描述字符模式的**对象**，由一些特殊的符号组成，其组成的字符模式用来匹配各种表达式；\r\n- 许多程序设计语言都支持利用正则表达式进行字符串操作，正则表达式这个概念最初是由 Unix 中的工具软件（例如 sed 和 grep ）普及开的。\r\n\r\n示例： http://www.cnblogs.com/zxin/archive/2013/01/26/2877765.html \r\n- 汉字： `^[\\u4e00-\\u9fa5]{0,}$`\r\n- 由数字和26个英文字母组成的字符串： `^[A-Za-z0-9]+$`\r\n- 由数字、26个英文字母或者下划线组成的字符串： `^\\w+$ 或 ^\\w{3,20}$`\r\n- Email地址： `^\\w+([-+.]\\w+)*@\\w+([-.]\\w+)*\\.\\w+([-.]\\w+)*$`\r\n- 手机号码： `^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\\d{8}$`\r\n- 身份证号(15位、18位数字)： `^\\d{15}|\\d{18}$`\r\n- 腾讯 QQ 号(从 10000 开始)： `[1-9][0-9]{4,}`\r\n\r\n<br>\r\n\r\n---\r\n\r\n# RegExp对象 \r\n\r\n> RegExp 对象表示正则表达式，它是对字符串执行模式匹配的强大工具 \r\n\r\n- 创建语法： \r\n\t- 方法1：直接量 \r\n\t<span style=\"color:red\">/</span>pattern<span style=\"color:red\">/</span>attributes \r\n\t```javascript\r\n\t//如在字符串中对 \"is\" 进行全局搜索：\r\n\tvar str=\"Is this all there is?\";\r\n\tvar patt1=/is/g;\r\n\t```\r\n\t- 方法2：实例化 RegExp 对象 \r\n\t```javascript\r\n\tnew RegExp(pattern, attributes); \r\n\t//如在字符串中对\"is\" 进行全局搜索： \r\n\tvar str=\"Is this all there is?\";  \r\n\tvar patt1= new RegExp(\"is\",\"g\")\r\n\t```\r\n\r\n- RegExp 对象修饰符\r\n\r\n修饰符|描述\r\n-----|----------------------------\r\ni    |执行对大小写不敏感的匹配 \r\ng    |执行全局匹配（查找所有匹配而非在找到第一个匹配后停止） \r\nm    |执行多行匹配 \r\n\r\n- RegExp对象方括号 \r\n\r\n符号             |描述 \r\n-----------------|--------------------------------\r\n`[abc]`          |查找方括号之间的任何字符 \r\n`[^abc]`         |查找任何不在方括号之间的字符 \r\n`[0-9]`          |查找任何从 0 至 9 的数字 \r\n`[a-z]`          |查找任何从小写 a 到小写 z 的字符 \r\n`[A-Z]`          |查找任何从大写 A 到大写 Z 的字符 \r\n`[a-zA-Z]`       |查找任何字母 \r\n[red &#124; blue &#x0007C; green]|查找任何指定的选项\r\n\r\n- RegExp 对象常用符号 \r\n\r\n符号      |描述 \r\n---------|-----------------\r\n`/.../`  |代表一个模式的开始和结束 \r\n`^`      |匹配字符串的开始 \r\n`$`      |匹配字符串的结束 \r\n`\\s`     |任何空白字符 \r\n`\\S`     |任何非空白字符 \r\n`\\d`     |匹配一个数字字符，等价于 [0-9] \r\n`\\D`     |除了数字之外的任何字符，等价于 [^0-9] \r\n`\\w`     |匹配一个数字、下划线或字母字符，等价于 [A-Za-z0-9_] \r\n`.`      |除了换行符之外的任意字符 \r\n\r\n- RegExp 对象重复字符串 \r\n\r\n符号       |描述\r\n----------|----------------------------------------\r\n`{n}`     |匹配前一项 n 次 \r\n`{n,}`    |匹配前一项 n 次，或者多于 n 次 \r\n`{n,m}`   |匹配前一项至少 n 次，但是不能超过 m 次 \r\n`*`       |匹配前一项 0 次或多次，等价于 `{0,}` \r\n`+`       |匹配前一项 1 次或多次，等价于 `{1,}` \r\n`?`       |匹配前一项 0 次或 1 次，也就是说前一项是可选的，等价于 `{0,1}`\r\n\r\n\r\n- 使用正则表达式验证手机号码,手机格式要求 13，15，18 开头的 11 位数字组成 \r\n\r\n```html\r\n<!DOCTYPE html>\r\n<html>\r\n<head lang=\"en\">\r\n    <meta charset=\"UTF-8\">\r\n    <title>正则表达式验证手机号码</title>\r\n    <script  type=\"text/javascript\">\r\n         function check(){\r\n             var str = document.getElementById(\"str\");\r\n             if( str.value == \"\" ){\r\n                 alert(\"请输入要验证的字符串\");\r\n                 str.focus();\r\n                 return;\r\n             }\r\n             //这里编写手机正则表达式 13，15，18 开头的 11 为数字组成\r\n\t\t\t//提示 RegExp 对象的 test() 方法用于检测一个字符串是否匹配某个表达式，匹配则返回 true，否则 false \r\n             alert( /^[13|15|18]\\d{9}$/.test(str.value)?\"YES,通过!\":\"NO,不通过!\");\r\n         }\r\n    </script>\r\n</head>\r\n<body>\r\n    <h3>表单验证</h3>\r\n     手机：<input type=\"text\" value=\"\" id=\"str\"/><br/>\r\n    <input type=\"button\" value=\"校验\" onclick=\"check()\" />\r\n</body>\r\n</html>\r\n```\r\n\r\n- 同理，验证邮箱示例（修改 `alert` 部分）\r\n```javascript\r\nalert( /^\\w+@\\w+(\\.\\w+){1,2}$/.test(str.value)?\"YES,通过!\":\"NO,不通过!\" );\r\n```\r\n\r\n<br>\r\n\r\n---\r\n\r\n# String 对象与正则表达式 \r\n\r\n- 支持正则表达式的 String 对象的方法 \r\n\r\n符号                      |描述 \r\n-------------------------|-----------------------------------\r\n`search(reg)`            |<span style=\"color:red\">检索</span>与正则表达式相匹配的值,返回查找位置的索引，否则返回 -1\r\n`match(reg)`             |<span style=\"color:red\">查找</span>到一个或多个正则表达式的匹配，返回数组或 null \r\n`replace(reg,str)`       |<span style=\"color:red\">替换</span>与正则表达式匹配的子串 \r\n`split(reg)`             |把字符串分割为字符串数组 \r\n\r\n- 示例 \r\n\r\n```javascript \r\nvar str = \"this   is  a big  dog!\"; \r\n\r\n// search() 方法应用，查找 str 字符串中的 \"i\" 字符串所在的位置 \r\nstr.search(/i/);    //返回 2, 即 this 中的 i 的位置 \r\n// match() 方法应用，查找 str 字符串中的 \"big\" 字符串 \r\nstr.match(/big/);    //返回[\"big\"] \r\n// replace() 方法应用，把 str 字符串中的 i 字符替换成大写的 I 字符； \r\nstr.replace (/i/g,\"I\");    // 返回 \"thIs Is a bIg dog!\"  \r\nstr.replace(\"i\",\"I\");    // 返回\"thIs is a big dog!\" \r\n// split() 方法应用，把 str 字符串中的按空格进行分割 \r\nstr.split(\" \");    //返回 [\"this\",\"\",\"\",\"\",\"is\",\"\",\"\",\"a\",\"\",\"big\",\"\",\"\",\"dog!\"]\r\nstr.split(/\\s+/);    //返回[\"this\",\"is\",\"a\",\"big\",\"dog!\"] \r\n```\r\n\r\n<br>\r\n\r\n---\r\n\r\n- 参考\r\n\t- jQuery 表单验证：https://github.com/jquery-validation/jquery-validation\r\n\t- 教程：http://www.runoob.com/jquery/jquery-plugin-validate.html"}}
{"actor":{"display_login":"FatliTalk"}}