纯JavaScript实现基础表单验证的示例代码

下面小编就为大家带来一篇javascript 基础表单验证示例(纯js实现)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧

验证思路

监听每个input控件的焦点离开（onblue），当焦点离开时调用验证函数，验证后修改第三栏文字，显示符合/不符合并返回true/false

实现代码：

立即学习“Java免费学习笔记（深入）”；

js-实现原生表单提交验证

原生js表单提交验证代码下载。原生JavaScript实现，适合新手学习js。用户填写完成后，点击提交按钮，判断填写的信息是否符合要求，如不符合将弹出相应的修改信息要求，引导用户正确填写表单。

下载

index.html

  
  



  

    

      

        
雇员编号
        

          
        
        

          
        
      
      

        
雇员姓名
        

          
        
        

          
        
      
      

        
雇员职位
        

          
        
        

          
        
      
      

        
雇员日期
        

          
        
        

          
        
      
      

        
基本工资
        

          
        
        

          
        
      
      

        
佣金
        

          
        
        

          
        
      
      

        

          
          
        
      
    
  

FormVapdation.js

// 日期选择
function layDate() {

}

// 验证雇员编号,4位纯数字编号
function vapdateEmpnb() {
  return vapdateRegexp("empnb", /^\d{4}$/);
}
// 验证雇员姓名,不为空
function vapdateEname() {
  return vapdateNull("ename");
}
// 验证雇员职位,不为空
function vapdateEpost() {
  return vapdateNull("epost");
}
// 验证雇员日期
function vapdateEdate() {
  return vapdateRegexp("edate", /^\d{4}-\d{2}-\d{2}$/)
}
// 验证基本工资
function vapdateEsalary() {
  return vapdateRegexp("esalary", /^\d+(\.\d{1,2})?$/)
}
// 验证佣金
function vapdateEbrok() {
  return vapdateRegexp("ebrok", /^\d+(\.\d{1,2})?$/)
}

// 提交时全部重新验证
function vapdate() {
  return vapdateEmpnb() && vapdateEname() && vapdateEpost() && vapdateEdate() && vapdateEsalary() && vapdateEbrok();
}
// 正则表达式验证
function vapdateRegexp(elemName, regexp) {
  var elem = document.getElementById(elemName);
  var msg = document.getElementById(elemName + 'Msg')
  console.log(regexp);
  console.log(elem.value);
  if (regexp.test(elem.value)) {
    msg.innerHTML = 'ok';
    msg.style.color = 'green';
    return true;
  } else {
    msg.innerHTML = '您的输入不符合规则';
    msg.style.color = 'red';
    return false;
  }
}
// 不为空验证
function vapdateNull(elemName) {
  var elem = document.getElementById(elemName);
  var msg = document.getElementById(elemName + 'Msg');
  console.log(elem.value);
  console.log(msg);
  if (elem.value == '' || elem.value == ' ') {
    msg.innerHTML = '您的输入不能为空';
    msg.style.color = 'red';
    return false;
  } else {
    msg.innerHTML = 'ok';
    msg.style.color = 'green';
    return true;
  }
}

css.css

html {
  font-size: 14px;
}

.table {
  border: 1px grey sopd;
}

.table tr {
  height: 2rem;
}

.table td {
  width: 15rem;
}