您的位置：首页 > Web前端 > JavaScript

javascript正则表达式入门

2014-11-08 13:47 417 查看

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> RegExp对象</title>
<script>
/*function validation(obj){
//1.得到文本框的值
//var name =   document.getElementById("username").value;
var name = obj.value;
//2.定义一个正则表达式
var regexp = new RegExp("[a-zA-Z]{6,10}");
//3.匹配
var bvalue = regexp.test(name);
//4.判断
if(bvalue){
alert("用户名格式正确");
}else{
alert("用户名格式错误，只能6-10位字母组成");
}
}*/

//调用函数规则一般:事件名="函数名()"
//onclick:点击
//onblur:失去焦点  onblur="validation(this)" this代表当前的标签
//onfocus:得到焦点

//即时的消息提示
function validationsw(obj){
//1.得到文本框的值
//var name =   document.getElementById("username").value;
var name = obj.value;
//2.定义一个正则表达式
var regexp = new RegExp("^[a-zA-Z]{6,10}$");
//3.匹配
var bvalue = regexp.test(name);
//根据id找到div
var errorsw = document.getElementById("errorMsg");
//4.判断
//innerHTML代表的是<div></div>中间的文本,而且能识别html标签
//innerText:代表的是<div></div>中间的文本,但不能识能html标签
if(bvalue){
errorsw.innerHTML="<font color='red'>用户名格式正确</font>";

}else{
errorsw.innerHTML="<font color='red'>用户名格式错误，只能6-10位字母组成</font>";
}
}

function clearText(objhsw){
var hswvalue = objhsw.value;
if(hswvalue == "只能6-10位字母组成"){
objhsw.value="";
}
}
function changeChar(obj){
var source = obj.value;
if(source!="只能是6-10位的字母组成"){
var regExp = new RegExp("^[a-zA-Z]{6,10}$");
flag = regExp.test(source);
}

var errorsw = document.getElementById("errorMsg2");

if(!flag){
errorsw.innerHTML = "<font color='red'>只能是6-10位的字母组成</font>";
}else{
errorsw.innerHTML = "<font color='green'>ok</font>";
}
}

</script>
</head>

<body>

<input type="text" value="只能6-10位字母组成" id="username" name="username" onfocus="clearText(this)" onblur="validationsw(this)" />
<div id="errorMsg" style="display:inline;"></div>

<hr size="3cm" color="blue"/>

<input id="source" type="text" value="只能是6-10位的字母组成" size="30" onchange="changeChar(this)" />
<div id="errorMsg2" style="display:inline;"></div>

</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航