小编最近在学习DRP项目的时候遇到了正则表达式的应用,因为上次没有写例子,所以这次特地来补上。。。
【效果图】
【问题1】 判断用户代码只能是数字或字母,并且为4~6位
1、非正则表达式
if (trim(userIdField.value).lenght>=4 && trim(userIdField.value).lenght<=6 ) {
alert("用户代码为4-6位");
userIdField.focus();
return;
}
for ( var i = 0; i < trim(userIdField.value).length; i++) {
var c=trim(userIdField.value).charAt(i);
if (!((c>='0' && c<='9') || (c>='a' && c<='z') || (c>='A' && c<='Z'))) {
alert("用户代码必须为数字和字母!");
userIdField.focus();
return;
}
}
2、正则表达式
var re=new RegExp(/^[a-zA-Z0-9]{4,6}$/);
if (!re.test(trim(userIdField.value))) {
alert("用户代码只能是数字或字母,只能为4-6位!");
userIdField.focus();
return;
}
【问题2】联系电话不为空,并且都为数字
1、非正则表达式
var contactTelField = document.getElementById("contactTel");
//alert("a" + trim(contactTelField.value) + "a");//空判断不出来 加上a
//不采用正则
if (trim(contactTelField.value) != "") {
for (var i=0; i<trim(contactTelField.value).length; i++) {
var c = trim(contactTelField.value).charAt(i);
if (!(c >= '0' && c <= '9')) {
alert("电话号码不合法!");
contactTelField.focus();
return;
}
}
}
2、正则表达式
var contactTelField = document.getElementById("contactTel");
if (trim(contactTelField.value) != "") {
//采用正则
re.compile(/\d/);// \d是 匹配一个数字
if (!re.test(trim(contactTelField.value))) {
alert("电话号码不合法!");
contactTelField.focus();
return;
}
}
【问题3】email不为空进行判断 判断规则:只要包含@就可,并且不再最前面也不再最后面
var emailField = document.getElementById("email");
if (trim(emailField.value).length != 0) {
var emailValue = trim(emailField.value);
//indexOf 返回索引值 等于第一个 或者是等于最后一个都email地址不正确
if ((emailValue.indexOf("@") == 0) || (emailValue.indexOf("@") == (emailValue.length - 1))) {
alert("email地址不正确!");
emailField.focus();
return;
}
//没有@ email地址不正确
if (emailValue.indexOf("@") < 0) {
alert("email地址不正确!");
emailField.focus();
return;
}
}
【问题4】设置用户代码只能输入字母、
function userIdOnKeyPress(){
if(!(event.keyCode>=97 && event.keyCode<=122)){
event.keyCode=0;
}
}
【问题5】设置回车键 相当于tab 往下走
//设置回车键 相当于tab 往下走
function onkeydown(){
if(window.event.keyCode==13 && window.event.srcElement.type!='button' ){
event.keyCode==9);
}
}
【问题6】提交表单的两种写法
/* 提交表单
document.getElementById("userForm").action="user_add.jsp";
document.getElementById("userForm").method="post";
document.getElementById("userForm").submit();
*/
//等同上面的写法
with (document.getElementById("userForm")) {
action="user_add.jsp";
method="post";
submit();
}
用了正则很是方面我们的学习,同时也节省了代码量!