需求：
当用户点击了校验按钮，要和获取输入框中的内容然后验证其是否合法；验证规则是：必须由字母，数字，下划线组成，并且长度是5到12
写法一（较繁琐）：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
/*
思路：点击验证按钮，向input返回flag，开始遍历校验，出错就alert()
问题：怎么向input返回值
怎么获取input输入
isNaN(x) 函数用于检查其参数是否是非数字值。
如果 x 是特殊的非数字值 NaN（或者能被转换为这样的值），返回的值就是 true。如果 x 是其他值,则返回 false。
*/
function btFun() {
return true;
}
function inFun(flag) {
var sum=0;
if (flag){
var arr =[];
//将输入框的值存储在数组arr中
arr =document.getElementById("01").value;
//判断长度是否合法
if((arr.length<5)||arr.length>12){
alert("长度必须在5到12之间");
}
//用字母，数字，下划线其中一个即可
for (var i = 0; i < arr.length; i++) {
if((!isNaN(arr[i]))||(arr[i]=='_')||('A'<=arr[i]&&arr[i]<='Z')||('a'<=arr[i]&&arr[i]<='z')){
}else{
alert("校验失败！用户名必须由字母，数字，下划线组成！");
sum++;
break;
}
}
//若sum为0说明每个字符都满足规则，即校验成功
if(sum==0){
alert("校验成功！"+"您输入的用户名是:"+document.getElementById("01").value);
}
}
}
</script>
</head>
<body>
用户名:<input type="text" id="01"/>
<button id="02" onclick="inFun(btFun())">校验</button>
</body>
</html>
运行结果截图：
写法二:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
function onclickFun() {
//获取dom对象
var usernameobj = document.getElementById("username");
//获取输入框的值
var usernameText = usernameobj.value
//使用正则表达式制定规则
var patt = /^\w{5,12}$/;
//判断输入框的值是否与规则相符
if(patt.test(usernameText)){
alert("合法");
}else{
alert("不合法");
}
}
</script>
</head>
<body>
用户名：<input type="text" id="username"/>
<button onclick="onclickFun();">
校验
</button>
</body>
</html>
