大家好！一般来说绝大多数网站都会有用户注册、用户登录这些基本的功能。那么用户注册具体是如何实现的呢？接下来我将简单设计一个用户注册的页面，通过JavaScript技术进行基础的表单验证
JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证
注册页面 register.html
注册表单验证
1. 给登录按钮绑定点击事件
2. 获取值 获取用户填写表单中的内容
3. 处理业务逻辑 根据需要进行逻辑判断，首先判断是否为空，如果为空，提示用户（span标签赋值），并且return ，然后判断是否符合规范，如果不符合，提示用户（span标签赋值），并且return
4. 如果都不为空且都规范要求，则手动提交表单
以验证手机号为例：
1、首先定义基础表单 从标准来讲，每一个元素都应该有一个id属性,在以后的开发过程之中，必须要保证id与 name属性内容完全一致，否则会出现莫名其妙的问题。对于JavaScript技术中，name可以省略，但id必须有。
<div id="form-itemGroup">
<label for="userPhone">手机号码：</label>
<input type="text" id="userPhone" class="userName" onBlur="checkPhone()" oninput="checkPhone()">
<span class="default" id="phoneErr">请输入11位手机号码</span>
</div>2、随后就需要针对于表单的数据进行验证，现在我们通过点击“注册”按钮就可以进行验证。
<div>
<button type="submit" class="divBtn">注册</button>
</div>
表单验证第一步，获取值 ：
function checkPhone(){
var userphone = document.getElementById('userPhone');
var phonrErr = document.getElementById('phoneErr');
var pattern = /^1[34578]\d{9}$/; //验证手机号正则表达式表单验证第二步，处理业务逻辑 ：
①判断是否为空
if(userphone.value.length == 0){
phonrErr.innerHTML="手机号不能为空"
phonrErr.className="error"
return false;
}
②判断是否符合规范
var pattern = /^1[34578]\d{9}$/; //验证手机号正则表达式注：这里补充一下正则表达式的用法：
在表单中输入数据时，为了保证输入的数据符合标准格式，那么就要在javaScript中使用正则应用语法：“/^正则标记$/.test(数据)”来验证相应的输入，这样才能保证验证的准确和完整性。
1、test() 方法是JavaScript中用于检测一个字符串是否匹配某个模式。 语法格式：RegExpObject.test(string) 其中RegExpObject为正则表达式格式，string为要检测的字符 串。如果字符串 string 中含有与 RegExpObject 匹配的文本，则返回 true，否则返回 false。
2、电话号码的简单正则表达式为：/^1[34578]\d{9}$/ 其中/^表示起始位置，$/表示结束位置。
if(!pattern.test(userphone.value)){
phonrErr.innerHTML="请输入正确手机号码"
phonrErr.className="error"
return false;
}
③手动提交表单
else{
phonrErr.innerHTML="<font color='green'>√</font>"
phonrErr.className="success";
return true;
}现在只是验证提示，发现验证不过关还是网页还是会提交的，所以，
需要为这个form表单也绑定事件。
<form action="pass.html" onSubmit="return checkForm()">注意这里需要在onSubmit前面加上return。对应的js函数的实现
function checkForm(){
var nametip = checkUserName();
var passtip = checkPassword();
var conpasstip = ConfirmPassword();
var phonetip = checkPhone();
return nametip && passtip && conpasstip && phonetip;
}以上就是表单验证电话号码的代码编写
接下来是对其它内容验证：相关JavaScript代码如下：
//验证用户名
function checkUserName(){
var username = document.getElementById('userName');
var errname = document.getElementById('nameErr');
if(username.value.length == 0){
errname.innerHTML="用户名不能为空"
errname.className="error"
return false;
}
else{
errname.innerHTML="<font color='green'>√</font>";
errname.className="success";
return true;
}
}效果如下：
//验证密码
function checkPassword(){
var userpasswd = document.getElementById('userPasword');
var errPasswd = document.getElementById('passwordErr');
var pattern = /^\w{4,8}$/; //密码要在4-8位
if(userpasswd.value.length == 0){
errPasswd.innerHTML="密码不能为空"
errPasswd.className="error"
return false;
}
if(!pattern.test(userpasswd.value)){
errPasswd.innerHTML="密码要在4-8位"
errPasswd.className="error"
return false;
}
else{
errPasswd.innerHTML="<font color='green'>√</font>";
errPasswd.className="success";
return true;
}
}//确认密码
function ConfirmPassword(){
var userpasswd = document.getElementById('userPasword');
var userConPassword = document.getElementById('userConfirmPasword');
var errConPasswd = document.getElementById('conPasswordErr');
if(userConPassword.value.length == 0){
errConPasswd.innerHTML="密码不能为空"
errConPasswd.className="error"
return false;
}
if((userpasswd.value)!=(userConPassword.value) || userConPassword.value.length == 0){
errConPasswd.innerHTML="上下密码不一致"
errConPasswd.className="error"
return false;
}
else{
errConPasswd.innerHTML="<font color='green'>√</font>"
errConPasswd.className="success";
return true;
}
}效果如下：
最终效果图展示：
好了，我亲爱的读者朋友，以上就是本文的全部内容了！！！
觉得有点用记得给我点赞关注哦！
非常期待与您的下次相遇哦！！！
