JS:正则的应用，联动菜单，数组相…

来源：互联网发布：淘宝评价保留几个月编辑：程序博客网时间：2024/05/18 10:17

12、String对象、正则表达式相关

length属性：eg str.length;

String对象的常用方法：

toLowerCase()

toUpperCase()

charAt(index) //返回在指定位置的字符

indexOf(字符串，index) //查找某个指定字符串在字符串中首次出现的位置，找不到返回-1

substring(index1,index2)//[index1,index2)，注意关键字substring全小写

---------------------------------

文本框对象

事件：

onblur

onfocus

onkeypress：某个键盘按键被按下并松开

方法：

blur()

focus()

select()

调用：document.getElementByIdx_x("test").focus();

---------------------------------

像需要获得某一对象的次数比较多的话，可以写一个方法，比如：

function $(ElementId){

return document.getElementByIdx_x(ElementId);

}

调用的时候直接 var pwd = $("pwd");

---------------------------------

JS中使用正则表达式：

var reg = /^\w+@\w+.[a-zA-Z]{2,3}(.[a-zA-Z]{2,3})?$/; //邮箱

【正则表达式对象】的方法：

test:检索字符串中指定的值，返回true或false

exec：检索字符中是正则表达式的匹配，返回找到的值，并确定位置

eg：reg.test(str);

【String对象】的方法：

match：找到一个或多个正则表达式的匹配

search：检索与正则表达式相匹配的值

replace：替换与正则表达式匹配的字符串

split：把字符串分割为字符串数组

eg：str.replace(reg,"需要替换的内容");

str.match(reg);

正则表达式附加参数：

g：全局匹配

i：不区分大小写

m：匹配多行

用法：var reg =/^\w+@\w+.[a-zA-Z]{2,3}(.[a-zA-Z]{2,3})?$/m;

用正则表达式做验证：

一般在表单的onsubmit事件中也要进行一次验证，比如：

<form method="post" action="2.jsp"onsubmit="return check()">//因为onsubmit是通过true/false来进行判断的

PS:在每个功能函数中都设置返回值（true/false，然后把每个功能函数在check方法中再进行一次判断），大致如下：

<scripttype="text/javascript">

var pwd;

function check(){

if(checkPwd()&&checkName()){//主判断

return true;

}else{

return false;

}

//每个输入框的onblur时的判断

function checkName(){

var name = document.getElementByIdx_x("name").value;

var reg = /^[a-zA-Z][a-zA-Z0-9]{3,15}$/;

if(!reg.test(name)){

document.getElementByIdx_x("nameErr").innerHTML="用户名由英文字母和数组组成的4-16位字符，以字母开头";

document.getElementByIdx_x("nameErr").className="show";

return false;

}

document.getElementByIdx_x("nameErr").className="hide";

return true;

}

function checkPwd(){

pwd = document.getElementByIdx_x("pwd").value;

var reg = /^[0-9a-zA-Z]{4,10}$/;

if(!reg.test(pwd)){

document.getElementByIdx_x("pwdErr").innerHTML="密码由英文字母和数组组成的4-10位字符";

document.getElementByIdx_x("pwdErr").className="show";

return false;

}

document.getElementByIdx_x("pwdErr").className="hide";

return true;

}

----------------------------------

JS中数组:

跟java和C#的定义不一样，在定义的同时进行初始化使用的是圆括号而不是大括号，如下：

var fruit=new Array("apple","melon","lemon");

仅声明一个数组： var fruit = new Array(4);

赋值： fruit[0] = "apple";

PS:这里面在声明的时候不带"[]"，同时第一个小例子用的是圆括号"()"，而不是大括号"{}"

-----------------------------------

下拉列表框对象：

String对象的常用事件、方法、属性

事件：onchange：当改变选项时调用的事件

方法：add()：向下拉列表框中添加一个选项

属性：option[]：返回包含下拉列表框中的所有选项的数组

selectedIndex：设置或返回下拉列表框中被选项目的索引号

length：返回下拉列表框中选项的数目

Option对象的常用属性

text：设置或返回某个选项的纯文本值

value：设置或返回被送往服务器的值

清空下拉框：对象.options.length = 0;

添加下拉选项：

对象.add(new Option("显示的内容","实际的值"),null); //一般的是.add(new,old)，如果old为null表示添加到末尾，否则添加到old之前

-----------------------------------

通过JS实现联动菜单的例子：

PS:如果脚本报"类型不匹配"的错误，是浏览器的问题（估计是IE6的问题，在IE9和FF下没问题）

<html>

<head>

<title>Untitled</title>

<scripttype="text/javascript">

var cityList = new Array();

cityList['上海'] = ['松江','徐汇','浦东'];

cityList['广东'] = ['深圳','九龙','广州'];

function changeCity(){

var province =document.getElementByIdx_x("province").value;

var city = document.getElementByIdx_x("city");

city.options.length = 0; //如果不清空的话会累加导致下拉内容越来越长

city.add(new Option("请选择",0),null);

for(var i in cityList){

if(i==province){

for(var j in cityList[i]){

city.add(new Option(cityList[i][j],cityList[i][j]),null); //如果是new Option(j,j)，则显示出来的是对应的索引号，非实际值

}

//初始化省份下拉列表

function loadProvince(){

var prov = document.getElementByIdx_x("province");

prov.options.length=0;

for(var k in cityList){

prov.add(new Option(k,k),null);

}

window.onload=loadProvince;

</script>

</head>

<body>

</select>

</select>

</body>

</html>