一.分享前端两个辅助开发的网址:
1.按键的样式等:http://craftpip.github.io/jquery-confirm/
2.统计表单样式:https://echarts.baidu.com/
二.正则表达式
1.定义
1)显示定义:一眼就看明白
var 变量名 = new RegExp("正则表达式模式");
2)隐式定义: 常用,简单。没那么明显,大家可能一眼没有看出
注意:开头和结尾都必须是斜杠“/”,且不需要使用双引号括起来的
var 变量名 = /正则表达式模式/;
例子:
var myregex = new RegExp("[0-9]");
var myregex = /[0-9]/;
<script type="text/javascript">
//显示定义
var reg = new RegExp("[0-9]");//匹配方括号内的数字,等价于\d
reg = new RegExp("\\d");//显示定义,在使用一些特殊字符时,需要转义
//隐式定义
var reg2 = /\d{6}/;//匹配6个数字
//拿到字符源
var a = "123456a123456";
//进行匹配:test()返回true/false,exec()返回字符串数组
alert(reg.test(a))
alert(reg2.test(a));
console.log(reg2.exec(a));
</script>
2.方法
1)test
①作用:是否匹配正则表达式模式。
返回:true/false, true:匹配, false:不匹配
regex.test(str)
②举例
var reg = new RegExp('[0-9]');
var reg2 = /[0-9]/;
var str = "abb12dfA45ab2";
console.log(reg.test(str));
3.修饰符
①修饰符
修饰符 | 描述 |
i | 执行对大小写不敏感的匹配 |
g | 执行全局匹配(查找所有匹配而非在找到第一个匹配后停止) |
②用法
(1)new RegExp("regexp","修饰符")
(2)/regexp/修饰符
var reg = new RegExp('[0-9]','g');
var reg2 = /\d/g; var reg3 = /a/i;
var reg4 = /a/ig;
var str = "123eAasd45h3";
console.log(str.match(reg));
console.log(str.match(reg3));
console.log(str.match(reg4));
3.表单校验
验证用户名、年龄
要求:
用户名至少需要8个字符,必须以字母开头,以字母或数字结尾,可以有-和_。
年龄在1~99之间
<body>
<form id="form" action="">
<table>
<tr>
<td>姓名<span id="namespan"></span></td>
</tr>
<tr>
<td> <input type="text" id="name" name="name" onBlur="valName()" />
</td>
</tr>
<tr>
<td>年龄<span id="agespan"></span></td>
</tr>
<tr>
<td> <input type="text" id="age" name="age" onBlur="valAge()" /> </td>
</tr>
</table>
</form>
<script type="text/javascript">
//表单验证
function valName(){
// ^:匹配输入符的开始位置
// $:匹配输入符的结尾位置
// ():标记一个子表达式的开始和结束的位置
// +:匹配前面的子表达式一次或者多次
// ?:匹配前面的子表达式零次或一次
// *: 匹配前面的子表达式零次或多次
var pattern =
new RegExp("^[a-z][a-z0-9-_]*[a-z0-9]$","i");
var str1=document.getElementById("name").value;
if(str1.length>=8){
if(pattern.test(str1)){
//alert("OK");
document.getElementById("namespan").innerHTML="";
return true;
}else{
document.getElementById("namespan").innerHTML="<span style='color:red'>至少需要8个字符,必须以字母开头,以字母或数字结尾,可以有-和_</span>";
return false;
}
}else{
document.getElementById("namespan").innerHTML="<span
style='color:red'>至少需要8个字符,必须以字母开头,以字母或数字结尾,可以有-和_</span>";
return false;
}
}
function valAge () {
var age = document.getElementById('age').value;
// {n,m}:n和m均为正整数,其中n<=m,最少匹配n次且最多匹配m次
var reg = /^[1-9][0-9]?$/g;
if(!reg.test(age)){
document.getElementById('agespan').innerHTML='<span style="color:red">年龄要在1~99之间</span>';
return false;
}else {
document.getElementById('agespan').innerHTML='';
return true;
}
}
</script>
</body>