JavaScript的基础表单验证_如何进行网页表单合法javascript-CSDN博客

本文链接：https://blog.csdn.net/zcj666999/article/details/117400155

大家好！一般来说绝大多数网站都会有用户注册、用户登录这些基本的功能。那么用户注册具体是如何实现的呢？接下来我将简单设计一个用户注册的页面，通过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; 
     }    
  }

效果如下：