利用Js来对表单进行验证的注册页面小案例,附完整源码和讲解

张 大鹏 2018-06-15

利用JS来对表单进行验证.

在Struts框架当中,都是用Validation这个工具类来验证的,需要自己配置,不过实际开发中,一般都是通过JS来进行验证.

这里举一个例子:

我写了两个页面,一个Html页面,用来显示,表达,一个Js页面,用来控制表单数据验证.

附上源代码,供大家参考学习.

html源代码

image

完整源码(可直接复制粘贴)

<!DOCTYPE html>

<html lang=”en”>

<head>

<meta charset=”UTF-8″>

<title>register</title>

<script src=”js/validateForm_test.js”></script>

</head>

<body>

<form action=”#” method=”post” name=”myform”>

<table align=”center” border=”1″>

<caption><h3>基于JS的验证</h3></caption>

<tr>

<th>用户名</th>

<td>

<input type=”text” name=”username”>

</td>

</tr>

<tr>

<th>密码</th>

<td>

<input type=”password” name=”password”>

</td>

</tr>

<tr>

<th>邮箱</th>

<td>

<input type=”text” name=”email”>

</td>

</tr>

<tr>

<td colspan=”2″ align=”center”>

<input type=”submit” value=”提交”>

</td>

</tr>

</table>

</form>

</body>

</html>

JS页面核心源码

image

完整源码(可直接复制粘贴)

function validateForm(){

var flag=false;

//定位到第一个form元素

var formElement=document.forms[0];

//依次取出用户名,密码和邮箱

var username=trim(formElement.username.value);

var password=trim(formElement.password.value);

var email=trim(formElement.email.value);

//判断用户名必填

if (username.length==0){

alert(“用户名必填”);

//将光标定位于用户名输入框

formElement.username.focus();

}else if (!/^[a-zA-Z0-9]+$/.test(username)){

alert(“用户名必须是英文数字”);

} else if (password.length==0){

alert(“密码必填”);

} else if (!/^[0-9]{6}$/.test(password)){

alert(“密码必须是6位数字”);

} else if (email.length==0){

alert(“邮箱必填”);

} else if (!/^\w+@+(\.\w+)+$/.test(email)){

alert(“邮箱格式不合法”);

} else {

alert(“可以提交”);

flag=true;

}

return flag;

}

//自定一个去空格的函数

function trim(s) {

s=s.replace(/^\s*$/,””);

return s;

}

//当该页面一加载,就会出发该匿名函数

window.onload=function () {

var myform=document.forms[0];

myform.onsubmit=validateForm;//这里不能填括号

}

最后这个匿名函数一定要注意,myform.onsubmit=validateForm;是没有括号的,一定要注意,一旦加上括号,就等于直接在加载的时候调用函数,会不断弹出”用户名不能为空”的提示.原因是页面加载的时候没有任何数据就进行了验证.

希望大家喜欢,创业和学习都不容易,支持我的朋友麻烦打赏一下.

张 大鹏

北京理想国惠玩科技有限公司CEO

Related Posts

发表评论

电子邮件地址不会被公开。 必填项已用*标注