js常用函数 _01 关于 model()、substr() 和 正则表达式的使用

js常用函数 _01 关于 model()、substr() 和 正则表达式的使用

1、model()

Bootstrap 模态框（Modal）插件

模态框（Modal）是覆盖在父窗体上的子窗体。通常，目的是显示来自一个单独的源的内容，可以在不离开父窗体的情况下有一些互动。子窗体可提供信息、交互等。

想要单独引用该插件的功能，那么您需要引用 modal.js。

详细说明 https://www.runoob.com/bootstrap/bootstrap-modal-plugin.html

2、substr()

实例

// 抽取指定数目的字符：
var str="Hello world!";
var n=str.substr(2,3)
// n 输出结果:
// llo

// 使用 substr() 从字符串第二个位置中提取一些字符：
var str="Hello world!";
var n=str.substr(2)
// n 输出结果:
// llo world!

定义和用法

substr() 方法可在字符串中抽取从 开始 下标开始的指定数目的字符。

提示： substr() 的参数指定的是子串的开始位置和长度，因此它可以替代 substring() 和 slice() 来使用。

在 IE 4 中，参数 start 的值无效。在这个 BUG 中，start 规定的是第 0 个字符的位置。在之后的版本中，此 BUG 已被修正。

ECMAscript 没有对该方法进行标准化，因此反对使用它。

注意： substr() 方法不会改变源字符串。

语法

string.substr(start,length)

参数值

参数	描述
start	必需。要抽取的子串的起始下标。必须是数值。如果是负数，那么该参数声明从字符串的尾部开始算起的位置。也就是说，-1 指字符串中最后一个字符，-2 指倒数第二个字符，以此类推。
length	可选。子串中的字符数。必须是数值。如果省略了该参数，那么返回从 stringObject 的开始位置到结尾的字串。

返回值

类型	描述
String	A new string containing the extracted part of the text

3、正则表达式的使用

实例

var txtvalve = this.value;
var reg = new RegExp(/^\d+$/);
if(!reg.test(txtvalve)){
 alert("必须输入数字")
}

test() 方法用于检测一个字符串是否匹配某个模式.

语法

RegExpObject.test(string)

参数	描述
string	必需。要检测的字符串。

返回值

如果字符串 string 中含有与 RegExpObject 匹配的文本，则返回 true，否则返回 false。

(出处：https://www.w3school.com.cn/jsref/jsref_test_regexp.asp)

说明

调用 RegExp 对象 r 的 test() 方法，并为它传递字符串 s，与这个表示式是等价的：(r.exec(s) != null)。

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

exec() 方法语法

RegExpObject.exec(string)

参数	描述
string	必需。要检索的字符串。

返回值

返回一个数组，其中存放匹配的结果。如果未找到匹配，则返回值为 null。

说明

exec() 方法的功能非常强大，它是一个通用的方法，而且使用起来也比 test() 方法以及支持正则表达式的 String 对象的方法更为复杂。

如果 exec() 找到了匹配的文本，则返回一个结果数组。否则，返回 null。此数组的第 0 个元素是与正则表达式相匹配的文本，第 1 个元素是与 RegExpObject 的第 1 个子表达式相匹配的文本（如果有的话），第 2 个元素是与 RegExpObject 的第 2 个子表达式相匹配的文本（如果有的话），以此类推。除了数组元素和 length 属性之外，exec() 方法还返回两个属性。index 属性声明的是匹配文本的第一个字符的位置。input 属性则存放的是被检索的字符串 string。我们可以看得出，在调用非全局的 RegExp 对象的 exec() 方法时，返回的数组与调用方法 String.match() 返回的数组是相同的。

但是，当 RegExpObject 是一个全局正则表达式时，exec() 的行为就稍微复杂一些。它会在 RegExpObject 的 lastIndex 属性指定的字符处开始检索字符串 string。当 exec() 找到了与表达式相匹配的文本时，在匹配后，它将把 RegExpObject 的 lastIndex 属性设置为匹配文本的最后一个字符的下一个位置。这就是说，您可以通过反复调用 exec() 方法来遍历字符串中的所有匹配文本。当 exec() 再也找不到匹配的文本时，它将返回 null，并把 lastIndex 属性重置为 0。

提示和注释

重要事项：如果在一个字符串中完成了一次模式匹配之后要开始检索新的字符串，就必须手动地把 lastIndex 属性重置为 0。

提示：请注意，无论 RegExpObject 是否是全局模式，exec() 都会把完整的细节添加到它返回的数组中。这就是 exec() 与 String.match() 的不同之处，后者在全局模式下返回的信息要少得多。因此我们可以这么说，在循环中反复地调用 exec() 方法是唯一一种获得全局模式的完整模式匹配信息的方法。(出处：https://www.w3school.com.cn/jsref/jsref_exec_regexp.asp)

实例

// 在本例中，我们将全局检索字符串中的 W3School：
<script type="text/javascript">
var str = "Visit W3School";
var patt = new RegExp("W3School","g");
var result;
while ((result = patt.exec(str)) != null)  {
  document.write(result);
  document.write("<br />");
  document.write(patt.lastIndex);
 }
</script>
// 输出：
W3School
14

一些常用的通过正则表达式进行输入检查的实例

	$.validator.methods.engnum = function(value, element) {
		// 半角字母数字
		var reg = /^[0-9a-zA-Z]+$/;
		return this.optional(element) || reg.test(value);
	};

	$.validator.methods.engnumhyphen = function(value, element) {
		// 半角字母数字，-（连字符）
		var reg = /^[0-9a-zA-Z\-]+$/;
		return this.optional(element) || reg.test(value);
	};

	$.validator.methods.engnumhyphenspace = function(value, element) {
		// 半角字母数字、-（连字符）、半角空格
         var reg = /^[0-9a-zA-Z\- ]+$/;
		return this.optional(element) || reg.test(value);
	};

	$.validator.methods.halfnum = function(value, element) {
		// 半角数字
		var reg = /^[0-9]*$/;
		return this.optional(element) || reg.test(value);
	};

	$.validator.methods.allchar = function(value, element) {
		var reg =  /^[\x20-\x7e]+$/;
		return this.optional(element) || reg.test(value);
	};

	$.validator.methods.date1 = function(value, element) {
		// date pattern: ddMMMyy hhmm
		var reg = /^(\d{2})(Jan|Feb|Mar|Apr|May|Jun|Jul|Aug|Sep|Oct|Nov|Dec)(\d{2}[ ]{1}\d{2}\d{2})$/gi;
		return this.optional(element) || validateDate(value, element, reg);
	};

	$.validator.methods.date2 = function(value, element) {
		// date pattern: DDMMMYY OR DDMMMYYYY
		var reg = /^(\d{2})(Jan|Feb|Mar|Apr|May|Jun|Jul|Aug|Sep|Oct|Nov|Dec)(\d{2}|\d{4})$/gi;
		return this.optional(element) || validateDate(value, element, reg);
	};

	$.validator.methods.date3 = function(value, element) {
		// date pattern: DDMMMYY OR DDMMMYYYY
		var reg = /^(\d{2})(Jan|Feb|Mar|Apr|May|Jun|Jul|Aug|Sep|Oct|Nov|Dec)(\d{2})$/gi;
		return this.optional(element) || validateDate(value, element, reg);
	};

4、this.optional

this.optional(element)是jquery.validator.js表单验证框架中的一个函数，用于表单控件的值不为空时才触发验证。

简单来说，就是当表单控件值为空的时候不会进行表单校验，此函数会返回true，表示校验通过，当表单控件值不为空的时候会执行后面的校验条件判断，并返回校验结果true或者false。一般在返回此函数返回值时会在后面使用||来连接一个校验条件。

示例代码如下：

jQuery.validator.addMethod("number", function(value, element) {
  return this.optional(element) || /[0-9]{1,2}/.test(value);
}, "请输入0-99的整数");

在这个例子中，当被执行校验的表单控件的值为空时，将直接返回true，即表单验证通过。当被执行校验的表单控件的值不为空时，会执行||后面的正则表达式匹配0-99的整数，匹配成功，则返回true，否则返回false。