什么是正则表达式:
正则表达式是一个描述字符模式的对象
定义正则表达式
表达式的模式
为什么需要正则表达式
简洁的代码
严谨的验证文本框的内容
为什么需要表单验证?
减轻服务器的压力
保证输入的数据符合要求
什么地方需要表单验证?
表单元素是否为空
用户名和密码
E-mail地址是否正确
身份证号码等是否是数字
表单验证思路,当输入的表单数据不符合要求时,如何编写脚本来进行提示?
获取表单元素值
使用JavaScript的一些方法对数据进行判断
当表单提交时,对获取的数据进行验证
定义正则表达式
普通方式:var reg = /表达式/附加参数
构造函数:var reg = new RegExp("表达式","附加参数")
//附加参数也可不写
RegExp对象
RegExp对象的方法:
- test:检索字符串中指定的指,返回true或false
- exec:在字符串中执行匹配搜索,返回结果数组
RegExp对象的属性
模式修饰符参数:
global :全局模式,应用于所有字符串
ignoreCase :执行对大小写不敏感的匹配
multiline :多行匹配模式
String对象的方法
match :找到一个或多个正则表达式的匹配
search :检索与正则表达式匹配的值
replaces :替换与正则表达式匹配的字符串
split :把字符串分割为字符串数组
以下部分为相关试验代码:
正则表达式普通方式
<script type="text/javascript">
window.onload = function(){
document.getElementById('form').onsubmit = function(){
var reg = /white/;
var a = document.getElementById('a').value;
if(reg.test(a)){
alert('验证通过');
}else {
alert('验证失败');
}
}
}
</script>
<body>
<form id="form" action="" method="post">
<input type="text" id="a"/>
<input type="submit" value="登陆"/>
</form>
</body>
String对象的方法
<script type="text/javascript">
window.onload = function(){
document.getElementById('form').onsubmit = function(){
var reg = /a/i;
var a = document.getElementById('a').value;
var arr = a.split(reg);
for(var i = 0; i < arr.length; i++){
alert(arr[i]);
}
}
}
</script>
<body>
<form id="form" action="" method="post">
<input type="text" id="a"/>
<input type="submit" value="登陆"/>
</form>
</body>
replace
<script type="text/javascript">
window.onload = function(){
document.getElementById('form').onsubmit = function(){
var reg = /a/ig;
var a = document.getElementById('a').value;
var b = a.replace(reg,'b');
var input = document.getElementById('a');
input.value = b;
}
}
</script>
<body>
<form id="form" action="" method="post">
<input type="text" id="a"/>
<input type="submit" value="登陆"/>
</form>
</body>
登录验证
<script type="text/javascript">
window.onload=function() {
var email=document.getElementById('email');
var pwd=document.getElementById('pwd');
document.getElementById('form').onsubmit=function() {
if(email.value=='') {
alert('请输入邮箱');
} else if(email.value.indexOf('@')==-1) {
alert('邮箱必须包含@');
} else if(email.value.indexOf('.')==-1) {
alert('邮箱必须包含.');
} else if(pwd.value=='') {
alert('请输入密码');
} else {
alert('登录成功');
}
return false;
}
}
</script>
<body>
<form id="form" action="" method="post">
邮箱: <input type="text" id="email" />
密码: <input type="password" id="pwd" />
<input type="submit" value="登录"/>
</form>
</body>