用JavaScript实现简单的表单验证
用JavaScript实现一个简单的表单验证：
JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证。
JavaScript验证内容：
- 验证用户名是否为空；
- 验证用户名是否在6-14之间；
- 验证密码是否为空；
- 验证密码是否小于6位；
- 验证确认密码是否与密码一致；
- 验证所填表单是否正确即符合要求 正确则提交表单；
Form表单
用于收集用户信息，如：登录、注册等场景；所有要提交的数据都必须放在form标签中
action：提交地址、动作，与input标签中typy标签的submit属性相关联。提交地址是action的地址
method:提交方法、该属性用来指定数据传送到服务器的方式。它有两种属性值，分别为 get 和 post。get 属性值表示将输入的数据追加在 action 指定的地址后面，并传送到服务器。当属性值为 post 时，会将输入的数据按照 HTTP 协议中的 post 传输方式传送到服务器。
input标签：输入框，是表单中最重要的部分
name：指定名字，因为提交的是键值对，所以必须要指定名字，否则无法提交，即使提交了也没有意义
value：文本框的内容，一般用在不能输入的类型中，如改变按钮的名字等。
placeholder：占位内容，通常用于提示：
readonly：只读模式，设置后无法修改输入框的内容
disabled：禁用状态
size：由于输入框是单行的，所以只能设置宽度
maxlength：限制输入框最大输入的字符个数
type属性：
text：普通文本，标签的默认属性时text ，通常如输入用户名用的是text
passworld：密文文本，输入的内容不显示。如密码输入框
submit：提交按钮。要与action一起用。
radio：单选框，多个关联选项name属性要一致，需要设置value，默认选中用checked设置
这里介绍平时开发网站中两个常见的事件
onfocus: 事件在对象获得焦点时发生。
onblur: 事件会在对象失去焦点时发生。
通俗的讲就是：
当鼠标点击文本框时，文本框获得焦点，触发onfocus，文本框中的值变为空，鼠标点击另外一处时，即文本
框失去焦点，触发onblur事件，进行判断文本框的内容，若value="",则给value赋值请输入用户名。
JavaScript中提交表单的两种方式：
onsubmit事件： 只能表单上使用,提交表单前会触发
onclick事件： 按钮等控件使用, 用来触发点击事件
第一种方式：表单提交，在form标签中增加onsubmit事件来判断表单提交是否成功
<script type="text/javascript">
function validate(obj) {
if (confirm("提交表单?")) {
alert(obj.value);
return true;
} else {
alert(obj.value);
return false;
}
}
</script>
<body>
<form action="http://www.baidu.com" onsubmit="return validate(document.getElementByIdx_x('myText'));">
<input type="text" id="myText"/>
<input type="submit" value="submit"/>
</form>
</body>
第二种方式：通过button按钮来触发表单提交事件οnclick=“submitForm();”，会忽略掉其他标签中的属性，比如form标签中的onsubmit属性就失效了。这时为了进行表单验证，可以将验证代码放在submitForm();方法中进行验证。
<script type="text/javascript">
function validate() {
if (confirm("提交表单?")) {
return true;
} else {
return false;
}
}
function submitForm() {
if (validate()) {
document.getElementByIdx_x("myForm").submit();
}
}
</script>
<body>
<form action="http://www.baidu.com" id="myForm">
<input type="text"/>
<input type="button" value="submitBtn" onclick="submitForm();"/> <!—也可以使用document.getElementByIdx_x(“该按钮的id”).click();来执行onclick事件-->
</form>
</body>
表单验证实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单验证</title>
</head>
<body>
<form name="Myform">
<table>
<tr>
<td>
用户名:</td>
<td><input type="text" id="username" name="username" onblur="checkName(this.value)" onfocus="clearNameError()" /></td>
<td><span id="nameError"></span></td>
</tr>
<tr>
<td>密码：</td>
<td><input type="password" id="userpswd" name="userpswd" onblur="checkUserpswd(this.value)" onfocus="clearPswdError()" /></td>
<td><span id="pswdError"></span></td>
</tr>
<tr>
<td>确认密码:</td>
<td><input type="password" id="confirmpswd" name="confirmpswd" onblur="isSame();" onfocus="clearSameError()" /></td>
<td><span id="confirmpswdError"></span></td>
</tr>
<tr>
<td><input type="button" value="注册" onclick="checkAll();" /></td>
</tr>
</table>
</form>
<script type="text/javascript">
String.prototype.trim = function() {
return this.replace(/(^\s*)|(\s*$)/g, "");
}
function checkName(username) {
username = username.trim();
var ok = false;
var nameError = document.getElementById("nameError");
if (username == "") {
nameError.innerHTML = "<font color='red'>用户名不能为空 </font>";
ok = false;
} else if (username.length < 6 || username.length > 14) {
nameError.innerHTML = "<font color='red'>用户名长度6-14 </font>";
ok = false;
} else {
nameError.innerHTML = " ";
ok = true;
}
return ok;
}
function clearNameError() {
var nameError = document.getElementById("nameError");
nameError.innerHTML = "";
}
function checkUserpswd(userpswd) {
var pswdError = document.getElementById("pswdError");
var ok = false;
if (userpswd == "") {
pswdError.innerHTML = "<font color='red'>密码不能为空 </font>";
ok = false;
} else if (userpswd.length < 6) {
pswdError.innerHTML = "<font color='red'>密码不少于6位 </font>";
ok = false;
} else {
pswdError.innerHTML = "";
ok = true;
}
return ok;
}
function clearPswdError() {
var pswdError = document.getElementById("pswdError");
pswdError.innerHTML = "";
}
function isSame() {
var userpswd = document.getElementById("userpswd").value;
var confirmpswd = document.getElementById("confirmpswd").value;
var confirmpswdError = document.getElementById("confirmpswdError");
var ok = false;
if (userpswd != confirmpswd) {
confirmpswdError.innerHTML = "<font color='red'>密码不一致</font>";
ok = false;
} else {
confirmpswdError.innerHTML = '';
ok = true;
}
return ok;
}
function clearSameError() {
var confirmpswdError = document.getElementById("confirmpswdError");
confirmpswdError.innerHTML = '';
}
function checkAll() {
var username = document.getElementById("username").value;
var userpswd = document.getElementById("userpswd").value;
if (checkName(username) && checkUserpswd(userpswd) && isSame()) {
document.Myform.submit();
}
}
</script>
</body>
</html>
效果演示
错误示例：
因为有错误，提交失败：
提交成功：