【JavaScript】正则表达式实例

 小编最近在学习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();}

  用了正则很是方面我们的学习，同时也节省了代码量！