uni-app 表单防止重复提交(前端)

做项目时经常遇到表单重复提交的问题 小编带来这一种有效的防止重复提交本人测试有效

上代码:

<form @submit="examine">

<button form-type="submit"  >提交</button>

</from>

examine(e){
              if(this.isCommitted==false){
                  this.isCommitted=true;

               uni.request({
                    url:url+'/CompanyController/addCompany',
                    method:'POST',
                    header:{
                    'Content-type':'application/x-www-form-urlencoded'
                    },
                    data:params,
                    dataType:'json',
                    success:function(res){

                         this.isCommitted=false;//后台请求成功了之后重新赋值false 让表单再次可提交

                    }

                 })
                  console.log("正常提交")
              }else{
                  console.log("不能重复提交")
                  return fasle;
              }
    
            }

到这里基本结束了 后面持续更新使用token令牌机制防止表单重复提交

对于uni-app中的表单校验,你可以使用一些常见的方法和插件来实现。 1. 使用HTML5表单属性:可以使用HTML5的表单属性来进行基本的前端校验,如`required`、`maxlength`、`minlength`等。这些属性可以在input标签中直接添加。 2. 自定义校验方法:可以使用JavaScript或Vue组件中的方法来进行自定义的校验逻辑。你可以在提交表单时触发校验方法,然后根据需求进行相应的校验逻辑,比如检查输入的格式是否正确、是否符合要求等。 3. 使用第三方校验插件:uni-app支持引入第三方校验插件来简化表单校验的过程。一些常见的插件包括VeeValidate、AsyncValidator等,它们提供了丰富的校验规则和功能,可以更高效地完成表单校验。 以下是一个使用VeeValidate进行表单校验的示例: 首先,安装VeeValidate插件: ``` npm install vee-validate ``` 然后,在你的uni-app项目入口文件中引入和配置VeeValidate: ```javascript import Vue from 'vue'; import VeeValidate from 'vee-validate'; import zh_CN from 'vee-validate/dist/locale/zh_CN'; Vue.use(VeeValidate, { locale: 'zh_CN', }); VeeValidate.Validator.localize('zh_CN', zh_CN); ``` 接下来,在你的表单组件中使用VeeValidate进行校验: ```vue <template> <form @submit="submitForm"> <input v-model="name" name="name" v-validate="'required'" :class="{ 'is-invalid': errors.has('name') }"> <span v-show="errors.has('name')" class="error">{{ errors.first('name') }}</span> <input v-model="email" name="email" v-validate="'required|email'" :class="{ 'is-invalid': errors.has('email') }"> <span v-show="errors.has('email')" class="error">{{ errors.first('email') }}</span> <button type="submit">Submit</button> </form> </template> <script> export default { methods: { submitForm() { this.$validator.validateAll().then(result => { if (result) { // 校验通过,进行表单提交操作 } }); }, }, }; </script> ``` 这是一个简单的示例,你可以根据具体的需求和业务逻辑来扩展和调整表单校验的规则和方法。希望对你有帮助!
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值