JS表单验证案例（基础版）

JS表单验证案例（基础版）

• 首先进行表单的创建

  <form action="#" method="get" onsubmit="return checkAll()">
  

  验证时将后台设为# 将post方式变为get方式 设置一个总的检验函数在表单提交进行总校验

• 表单与表格的嵌套

  <table border="" width="700px" height="350px" align="center" style="margin-top: 90px;background-color: aquamarine;">
  <tr><td class="xx" colspan="2" style="text-align: center;">用户注册页面</td></tr>
  

  八行 两列 第一列进行合并（cosplay来进行合并） 用来放置标题

• 用户名的校验

  <tr><td class="xx">用户名：</td><td class="x2">
  <input type="text" name="username" id="xxx" value="" placeholder="请输入用户名6-16位字母" oninput="checkUsername()" />
  <span id="ccc"></span>
  </td></tr>
  

  定义一个空的span块 用来显示错误提示

  用 oninput 来检测输入用户名的格式 边检测边输入 也可以使用onblur 输入完成后再进行判断检测验证

  调用checkUsername()函数进行检测

  function checkUsername() {
      var c = document.getElementById("xxx").value;
      var regx = /^[a-zA-Z]{6,16}$/; 
  	var f = regx.test(c);
  	var cc = document.getElementById("ccc");
  	if (f) {
  		cc.innerHTML = "<font color='green'>用户名规则正确✔</font >"
  	} else {
  		cc.innerHTML = "<font color='red'>用户名格式错误</font>"
  	}
  	return f;
  }
  

  通过document.getElementById来获取用户名的value值 (注意 这样返回的结果是String类型)

  然后定义用户名的正则表达式 然后与用户名的value值进行匹配

  匹配正确 空的span块输出 用户名规则正确✔

  匹配错误 空的span块输出 用户名格式错误

  再次 return 比较结果

• 密码与确认密码的检验

  <tr>
  <td class="xx">密码：</td>
  <td class="x2"><input type="password" name="password" id="psd" value="" placeholder="请输入密码8位密码" oninput="checkPassord()" />
  <span id="mima"></span>
  </td></tr>
  <tr>
  <td class="xx">确认密码：</td>
  <td class="x2"><input type="password" name="password" id="psd1" value="" placeholder="请输入确认密码8位密码" oninput="checkPassord1()" />
  <span id="tishi"></span>
  </td></tr>
  function checkPassord() {
  		var c1 = document.getElementById("psd").value;
  		var regx1 = /^[a-zA-Z0-9]{8,16}$/;
  		var f1 = regx1.test(c1);
  		var cc1 = document.getElementById("mima");
  		if (f1) {
  			cc1.innerHTML = "<font color='green'>密码格式正确✔</font >"
  		} else {
  			cc1.innerHTML = "<font color='red'>密码格式错误</font>"
  		}
  		return f1;
  	}
  function checkPassord1() {
  		var c2 = document.getElementById("psd").value;
  		var c3 = document.getElementById("psd1").value;
  		var cc2 = document.getElementById("tishi");
  		if (c3 == c2) {
  			cc2.innerHTML = "<font color='green'>两次密码输入一致✔</font >"
  		} else {
  			cc2.innerHTML = "<font color='red'>两次密码输入不一致</font>"
  		}
  		return c3 == c2;
  	}
  

  密码检验的过程与用户名检验的过程类似 正则中额外添加数字 作为密码的正确格式

  确认密码时 通过获取两者的value 进行比较 根据结果 在空的块中显示结果提示
  

• 性别与爱好的选择提示

  <tr>
  <td class="xx">性别：</td>
  <td class="x2">
  <div id="" onmouseleave="checkhhh()">
  <input type="radio" name="f" id="y1" />男
  <input type="radio" name="f" id="y2" />女
  <span id="caox"></span></div>
  </td></tr>
  <tr>
  <td class="xx">爱好：</td>
  <td class="x2">
  <div id="" onmouseleave="checkeee()">
  <input type="checkbox" name="" id="u1" value=" " />跑步
  <input type="checkbox" name="" id="u2" value=" " />没什么爱好
  <input type="checkbox" name="" id="u3" value=" " />有很多爱好
  <span id="cao"></span></div>
  </td></tr>
  

  性别用单选框radio （注意 radio的name必须一致 否则 无法达到单选的效果）

  使用onmouseleave来进行选择检测

  为此我们定义两个div块 来达到检测到未选择则选项 而鼠标离开此块 就进行选择结果的提示

  function checkhhh() {
  var caocaox = document.getElementById("caox");
  if (document.getElementById("y1").checked == false && document.getElementById("y2").checked == false) {
  			caocaox.innerHTML = "<font color='red'>请勾选您的性别</font>"} 
  			else {
  			caocaox.innerHTML = "<font color='green'>性别已勾选</font>"}
  return !(document.getElementById("y1").checked==false &&document.getElementById("y2").checked == false);} 
  
  function checkeee() {
  		var caocao = document.getElementById("cao");
  		if (document.getElementById("u1").checked == false && document.getElementById("u2").checked == false && document.getElementById("u3").checked == false) {
  			caocao.innerHTML = "<font color='red'>请至少勾选一项兴趣爱好</font>"
  
  		} else {
  			caocao.innerHTML = "<font color='green'>爱好已勾选</font>"}
  return !(document.getElementById("u1").checked == false &&document.getElementById("u2").checked == false && document.getElementById("u3").checked == false);}
  

  在进行性别勾选检测时 用document.getElementById来获取性别选项的checked属性

  当且仅当两个性别选项全部为false 也就是两个选项都未选择的时候 我们会弹出未勾选提示

  注意 在这里由于我们的条件是两者都未选择

  因此这两个函数的返回值与其余检测项的返回值不同的是 这里我们返回的是条件的取反值

  兴趣爱好与性别类似 不做赘述
  

• 个人描述字数的检测

  <tr height="150px">
  <td class="xx">个人描述：</td>
  <td class="x2"><input type="text" style="width: 244px;height: 150px;" name="miaoshu" placeholder="请填写个人描述" id="miaoshu"
  value="" oninput="checkMiaoshu()" />
  <span id="miaoshu1"></span>
  </td></tr>
  
  

  检测方式一样 oninput 边输入边检测

  function checkMiaoshu() {
  		var c4 = document.getElementById("miaoshu").value;
  		c4 = c4.trim();
  		var cc3 = document.getElementById("miaoshu1");
  		if (c4.length > 5) {
  			cc3.innerHTML = "<font color='green'>个人描述合格✔</font >"} 
  			else {
  			cc3.innerHTML = "<font color='red'>个人描述字数小于五十字</font>"}
   return c4.length > 5;}
  
  

获取value值 trim去除空格 检测获取的长度 根据要求弹出提示

• 提交与重置

  <tr>
  <td class="xx" colspan="2" style="text-align: center;">
  <input type="submit" value="注册" />
  <input type="reset" value="重置" />
  </td></tr>
  
  

  这里有一个别忽略的是 表单开始时我们定义了一个提交时检测所有的checkall函数

  function checkAll() {
  return checkUsername() && checkPassord() && checkPassord1() && checkhhh() && checkeee() && checkMiaoshu();}
  
  

再次检测后 无不合格要求的进行提交 交给后台

至此 JS语言的表单简单验证结束