2015061210 - js非空校验

   js判断输入项是否为空的校验       

   //判断数据是否为空,null,"",undifind,"         ",返回结果为空返回true,否则返回false

   function checkInput(data){

     if (data == null || data == undefined  || data == ""){

          return true;

     }

     if (typeof data == "string") {

          var result =data.replace(/(^\s*)|(\s*$)/g, "");

          return result.length == 0 ? true : false;

     }else{

          return false;

     }

  }

在Element UI的`el-table`内嵌输入框并实现校验,你可以按照以下步骤操作: 1. 定义表格结构[^1]: ```html <template> <el-form ref="formRef"> <el-table :data="tableData"> <el-table-column prop="displayCode" label="显示编号" v-model="form.displayCode" :rules="[{'required': true, 'message': '请输入显示编号', 'trigger': 'blur'}]" /> <!-- 添加其他列 --> </el-table> </el-form> </template> ``` 这里我们使用`v-model`指令将输入框与`form`对象的相应字段关联起来,并设置了验证规则。 2. 初始化表单和数据: ```js data() { return { ..., form: {}, // 初始化一个空的对象来保存表单数据 tableData: [ { displayCode: '' } // 每一行的数据包括一个默认的空字符串 ] }; }, ``` 注意,`form`对象应该初始化为空,以便在首次渲染时能正确地应用验证规则。 3. 表单验证: 当你需要提交表单时,可以使用`el-form`组件的方法,如`validate`和`resetFields`: ```js methods: { handleFormSubmit() { this.$refs.formRef.validate((valid) => { if (valid) { // 提交数据,假设你有一个异步请求接口 this.submitFormData(this.form); // 或者清空输入框 this.resetFields(); } else { console.log('表单不合法'); } }); }, resetFields() { this.form.displayCode = ''; // 清空其他可能有错误的字段 } } ``` 这里,`handleFormSubmit`函数会先验证表单是否有效,如果有效则提交数据,无效则返回提示。 4. 如果数据是从服务器动态加载的[^2],那么可以在请求成功后更新`tableData`并同步到`prodList`,这样验证才会生效: ```js async fetchData() { const response = await yourApiRequest(); this.tableData = response.data; this.prodList = response.data; // 更新 prodList } // 在适当的地方调用 fetchData() ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值