一个通用的form必填表字段的校验

 

//js代码

function validForm(){
 var allGood = true;
 var allTags = document.getElementsByTagName("*");
 for(var i=0; i<allTags.length; i++){
  if(allTags[i].nodeName=="INPUT" || allTags[i].nodeName=="TEXTAREA"){
   if(!validTag(allTags[i])){
    allGood=false;
   }
  }
 }
 return allGood;
 function validTag(thisTag){
  var outClass = "";
  var allClasses = thisTag.className.split(" ");
  for(var j=0; j<allClasses.length; j++){
   outClass += validBasedOnClass(allClasses[j]) + " ";
  }
  
  thisTag.className = outClass;
  if(outClass.indexOf("invalid") > -1){
   thisTag.focus();
   if(thisTag.nodeName=="INPUT"){
    thisTag.select();
   }
   return false;
  }
  return true;
  
  function validBasedOnClass(thisClass){
   var classBack = "";
   switch(thisClass){
    case "":
    case "invalid":break;
    case "reqd":
    if(allGood && thisTag.value=="") classBack = "invalid ";
    classBack += thisClass;
    break;
    case "pwd":
     if(allGood && !crossCheck(thisTag,thisClass)) classBack = "invalid ";
     classBack += thisClass;
     break;
    default:
    classBack += thisClass;
   }
   return classBack
  }
  function crossCheck(inTag,otherFieldId){
   var inTagValue = inTag.value;
   var otherFieldValue = document.getElementById(otherFieldId);
   return (inTagValue==otherFieldValue);
  }
 }

}

//css 代码

.invalid {
 background-color: #ff9;
 border: 2px red inset;
}

 

//页面使用,在class里面添加reqd就 可以了,记得 和其他的class分开

<input id="userid" name="username" size="25" maxlength="25" type="text"  class="reqd">

``` <div v-for="(question, index) in questions" :key="index"> <!-- 单选框 --> <el-form-item v-if="question.question_type === 1" :label="question.question_text" :prop="`${question.question_code}`" :rules="[ { required: true, message: '请选择', trigger: 'change'} ]"> <el-radio-group v-model="formData[question.question_code]" :disabled='isUpdate'> <el-radio v-for="option in question.options" :key="option.option_code" :value="option.option_code">{{ option.option_text }}</el-radio> </el-radio-group> </el-form-item> <!-- 复选框 --> <el-form-item v-else-if="question.question_type === 2" :label="question.question_text" :prop="`${question.question_code}`" :rules="[ { type: 'array', required: true, message: '请至少选择一项', trigger: 'change'} ]"> <el-checkbox-group v-model="formData[question.question_code]" :disabled='isUpdate'> <el-checkbox v-for="option in question.options" :key="option.option_code" :value="option.option_code">{{ option.option_text }}</el-checkbox> </el-checkbox-group> </el-form-item> </div> <el-form ref="formRef" :model="info" :rules="rules" label-width="80px" @submit.prevent=""> <el-row :gutter="16"> <el-col :span="6"> <el-form-item label="姓名" prop="name"> <el-input clearable v-model="info.name" :disabled='isUpdate' /> </el-form-item> </el-col> <el-col :span="6"> <el-form-item label="性别" prop="gender"> <el-input clearable v-model="info.gender" :disabled='isUpdate' /> </el-form-item> </el-col> <el-col :span="6"> <el-form-item label="年龄" prop="age"> <el-input clearable v-model="info.age" :disabled='isUpdate' /> </el-form-item> </el-col> </el-row> <el-row :gutter="16"> <el-col :span="10"> <el-form-item label="身份证号" prop="id_no"> <el-input clearable maxlength="18" v-model="info.id_no" :disabled='isUpdate' /> </el-form-item> </el-col> <el-col :span="6"> <el-form-item label="联系方式" prop="phone_no"> <el-input clearable maxlength="11" v-model="info.phone_no" :disabled='isUpdate' /> </el-form-item> </el-col> <el-col :span="6"> <el-form-item label="调查方式" prop="visit_type"> <el-radio-group v-model="info.visit_type" :disabled='isUpdate'> <el-radio value="自助" label="自助" /> <el-radio value="电话" label="电话" /> <el-radio value="微信" label="微信" /> </el-radio-group> </el-form-item> </el-col> </el-row> </el-form>```两个填表单提交时如何校验function submit() { formRef.value?.validate?.((valid) => { // console.log(valid) if (!valid) { EleMessage.error('请填写填项'); return; }
最新发布
03-08
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值