iview输入框如何防止输入框输入sql语句和Js语句

iview输入框如何防止输入框输入sql语句和Js语句

<FormItem label="名称:" prop="name">
        <Input
          v-model="adForm.name"
          placeholder="请输入名称"
          @on-blur="getBlurValue($event, 'name')">
          </Input>
</FormItem>

绑定一个on-blur事件,失去焦点就触发,验证输入框里面的内容是否合法。

data (){
	return {
      adForm: {
      name:''
    }
}


getBlurValue (e, type) {
      let inputValue = e.target.value    //获取输入框内的内容
      var pat = /[<>?!]|(select\s[\w|*]+\sfrom)/i
      if (pat.test(e.target.value)) {    //如果正则匹配成功,就把输入框内的值设置为空,并提示
        this.adForm[type] = ''
        this.$message.warning('文本框输入不支持SQL和JS代码类型')
      }
    }
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
可以使用iView框架中的Select组件和Input组件来实现一个可以输入和选择的输入框。 首先,在组件中引入Select组件和Input组件: ``` <template> <div> <i-select v-model="selectedValue" :clearable="true" :filterable="true" :remote="true" :loading="loading" :remote-method="remoteMethod" :placeholder="placeholder"> <i-option v-for="(item, index) in options" :key="index" :value="item.value">{{ item.label }}</i-option> </i-select> <i-input v-model="inputValue" :placeholder="placeholder" :disabled="loading" :readonly="!showInput" @click.native="showInput = true" @blur.native="showInput = false" /> </div> </template> <script> export default { data() { return { selectedValue: '', inputValue: '', options: [], loading: false, showInput: false, placeholder: '请选择或输入' } }, methods: { remoteMethod(query) { // 远程搜索API地址 const api = `https://api.example.com/search?q=${query}`; // 发送请求 this.loading = true; axios.get(api).then(response => { // 处理返回数据,将数据格式化为Select组件需要的格式 const options = response.data.map(item => { return { value: item.id, label: item.name }; }); // 将格式化后的数据赋值给options this.options = options; this.loading = false; }).catch(error => { console.error(error); this.loading = false; }); } } } </script> ``` 在上述代码中,我们使用了iView的Select组件和Input组件来实现可以输入和选择的输入框。在Select组件中,我们使用了远程搜索功能,使用了Select组件的filterable属性和remote属性来开启远程搜索功能。在remote-method方法中,我们发送异步请求获取搜索结果,并将结果格式化为Select组件需要的格式,然后将结果赋值给options。在Input组件中,我们使用了@click.native和@blur.native事件来控制输入框的显示和隐藏。 这样,当用户在输入框输入内容时,会触发remote-method方法来搜索远程数据,并将搜索结果以下拉列表的形式呈现在选择框中供用户选择。同时,用户也可以直接在输入框输入内容。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值