正如我们所见到的，好多网页都有注册界面，在注册界面中，最常见的即是包括用户名、密码、请重复输入密码和一个“注册”按钮，今天我们就举例实现一下该界面。
要求：
1.用户名不为空，且用户名不能超过12个字符；
2.密码不为空，且密码不能超过15个字符；
3.密码和重复输入的密码必须一致；
4.如果发生错误，显示错误并聚焦到错误位置；
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>注册</title>
<script>
function $(id){
return document.getElementById(id);
}
function test(){
var user_name = $("user_name").value;
var password = $("password").value;
var re_password = $("re_password").value;
if(user_name.length==0){
$("msg").innerHTML = "用户名不能为空！";
$("user_name").focus();
return false;
}
if(user_name.length>12){
$("msg").innerHTML = "用户名不能超过12个字符！";
$("user_name").focus();
return false;
}
if(password.length==0){
$("msg").innerHTML = "密码不能为空！";
$("password").focus();
return false;
}
if(password.length>15){
$("msg").innerHTML = "密码不能超过15个字符！";
$("password").focus();
return false;
}
if(password!=re_password ){
$("msg").innerHTML="错误！密码不一致！";
$("re_password").focus();
return false;
}
console.log("注册成功！");
return true;
}
</script>
</head>
<body>
<br />
<span id="msg" style="color: red;"></span>
<form onsubmit="return test()">
<input placeholder="请输入用户名" id="user_name" /><br />
<input placeholder="请输入密码" type="password" id="password"/><br />
<input placeholder="请再次输入密码" type="password" id="re_password"/><br />
<input type="submit" value="注册" />
</form>
</body>
</html>
注：方法不唯一，此方法仅作参考。
下面对该代码中的一些点进行讲解：
1. （id）的作用类似于C语言中的define,将所使用的功能或语句定义为一个符号或字符串，极大程度的简化代码，你也可以不使用该方法，用document.getElementById()还原（id）的作用类似于C语言中的define,将所使用的功能或语句定义为一个符号或字符串，极大程度的简化代码，你也可以不使用该方法，用document.getElementById()还原()；
2. 定义的对象必须加.value使其为获取的输入的值，而下面聚焦时，需要改用focus；
3. 在每个if语句中，最好再加一个返回值，提高代码的运行效果，innerHTML的作用是在浏览器页面中显示；
4. 在整个函数test()的最后，若return false，则为取消提交，若return true，则为正常提交；
大家可以自己尝试一下，部分页面如下：
直接运行代码如图：
不输入任何值，直接点击注册，效果如图：
全部按要求输入后，会返回最初的样子，是因为没有指定成功输入后跳转的界面，自己设置即可。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
您可能感兴趣的文章:
- jquery validate.js表单验证的基本用法入门
- js验证表单大全
- js 常用正则表达式表单验证代码
- js校验表单后提交表单的三种方法总结
- 利用JS提交表单的几种方法和验证(必看篇)
- JavaScript表单验证完美代码
- JavaScript 表单验证正则表达式大全[推荐]
- AngularJS实现表单验证
- javascript制作的简单注册模块表单验证
- js正则表达式注册页面表单验证