Vue判断输入框中的数据是不是正则

最新推荐文章于 2023-05-15 17:05:24 发布

原创最新推荐文章于 2023-05-15 17:05:24 发布 · 715 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue

前端专栏收录该内容

32 篇文章

订阅专栏

此博客介绍如何使用 Vue.js 开发时，通过 Vue Form 实现用户输入的正则表达式校验。通过实例演示验证过程，并展示了如何捕获并处理可能的错误。

<template>
   <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="你的答案">
           <el-input v-model="form.name" placeholder="请输入你的答案"></el-input>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="onSubmit">立即创建</el-button>
        </el-form-item>
    </el-form>
</template>

<script>
    export default {
        data() {
            return {
             form: {
                name: ''
               }
            }
        },
        methods: {
            onSubmit(form) {
		         this.$refs.form.validate((valid) => {
		            //打印输入的值
		            console.log("name",this.form.name)
		            //对输入的值进行是否是正则表达式的校验
		           var a;
		           try{
		               a= eval(this.form.name) instanceof RegExp ;
		           }catch(error){
		               console.log('异常',error);
		                a=false ;
		           } 
		           if(a){
		              alert('是正则')
		           }else{
		                alert('不是正则')
		           }
        });
    }
},
}
</script>