• ElementUI之CUD+表单验证

    前言：

    ElementUI是一个基于Vue.js 2.0的组件库，提供了众多易用的UI组件和工具。其表单验证功能非常强大，可以轻松实现CUD（Create, Update, Delete）操作时的数据格式验证。

    在ElementUI中，表单验证主要通过el-form-item组件实现。该组件提供了多种验证规则（如必填、邮箱格式、长度、数字等），同时还可以自定义验证规则。开发者只需要在表单元素上加上对应的验证规则即可自动触发验证功能。验证结果会在el-form-item的子元素中显示，并且在提交表单数据前会进行最终的整体验证。

    在CUD操作中，表单验证可以有效地保证数据的准确性和完整性。当用户输入不符合规则的数据时，会立即得到提示并禁止提交数据。这可以避免用户输入错误数据导致系统崩溃或数据混乱的问题。

    总之，ElementUI提供了非常方便的表单验证功能，可以帮助开发者更加轻松地实现数据的增删改查操作。

    增删改查

    在我们实现增删改查之前我们要先把我们的接口定义
     

    1. //src/api/action.js
    2. /**
    3.  * 对后台请求的地址的封装，URL格式如下：
    4.  * 模块名_实体名_操作
    5.  */
    6. export default {
    7. 	'SERVER': 'http://localhost:8080/ssm', //服务器
    8. 	'SYSTEM_USER_DOLOGIN': '/user/userLogin', //登陆
    9. 	'SYSTEM_USER_DOREG': '/user/userRegister', //注册
    10.   'SYSTEM_MENUS': '/module/queryRootNode', //左侧菜单树
    11.   'BOOK_LIST': '/book/queryBookPager', //书籍列表
    12.   'BOOK_ADD': '/book/addBook', //书籍增加
    13.   'BOOK_UPD': '/book/editBook', //书籍修改
    14.   'BOOK_DEL': '/book/delBook', //书籍删除
    15. 	'getFullPath': k => { //获得请求的完整地址，用于mockjs测试时使用
    16. 		return this.SERVER + this[k];
    17. 	}
    18. }

    其次我们的数据

    样式可以去我们的elementUI官网去copy我们喜欢的样式，用来改变。

    1.    <!-- 编辑窗体 -->
    2.     <el-dialog :title="title" :visible.sync="dialogFormVisible" @close="clear">
    3.       <el-form :model="book" :rules="rules" ref="book">
    4.         <el-form-item label="书籍编号" :label-width="formLabelWidth" prop="id">
    5.           <el-input v-model="book.id" autocomplete="off"></el-input>
    6.         </el-form-item>
    7.         <el-form-item label="书籍名称" :label-width="formLabelWidth" prop="bookname">
    8.           <el-input v-model="book.bookname" autocomplete="off"></el-input>
    9.         </el-form-item>
    10.         <el-form-item label="书籍价格" :label-width="formLabelWidth" prop="price">
    11.           <el-input v-model="book.price" autocomplete="off"></el-input>
    12.         </el-form-item>
    13.         <el-form-item label="书籍类别" :label-width="formLabelWidth" prop="booktype">
    14.           <el-select v-model="book.booktype" placeholder="请选择活动区域">
    15.             <el-option v-for="t in types" :label="t.name" :value="t.name" :key="'key_'+t.id"></el-option>
    16.           </el-select>
    17.         </el-form-item>
    18.       </el-form>
    19.       <div slot="footer" class="dialog-footer">
    20.         <el-button @click="dialogFormVisible = false">取 消</el-button>
    21.         <el-button type="danger" @click="dosub">确 定</el-button>
    22.       </div>
    23.     </el-dialog>
    1.   export default {
    2.     data() {
    3.       return {
    4.         bookname: '',
    5.         tableData: [],
    6.         rows: 10,
    7.         total: 0,
    8.         page: 1,
    9.         title: '新增窗体',
    10.         dialogFormVisible: false,
    11.         formLabelWidth: '100px',
    12.         types: [],
    13.         book: {
    14.           id: '',
    15.           bookname: '',
    16.           price: '',
    17.           booktype: ''
    18.         },
    19.         rules: {
    20.           bookname: [{
    21.             required: true,
    22.             message: '请输入书籍名称',
    23.             trigger: 'blur'
    24.           }],
    25.           price: [{
    26.             required: true,
    27.             message: '请输入书籍名称',
    28.             trigger: 'blur'
    29.           }],
    30.           booktype: [{
    31.             required: true,
    32.             message: '请输入书籍名称',
    33.             trigger: 'blur'
    34.           }]
    35.         }
    36.       }
    37.     },
    38.     methods: {
    39.       del(idx, row) {
    40.         this.$confirm('此操作将永久删除id为' + row.id + '的数据, 是否继续?', '提示', {
    41.           confirmButtonText: '确定',
    42.           cancelButtonText: '取消',
    43.           type: 'warning'
    44.         }).then(() => {
    45.           let url = this.axios.urls.SYSTEM_BookDEL;
    46.           this.axios.post(url, {
    47.             id: row.id
    48.           }).then(d => {
    49.             console.log(d);
    50.             this.$message({
    51.               type: 'success',
    52.               message: '删除成功!'
    53.             });
    54.             this.query({});
    55.             this.tableData = d.data.rows;
    56.             this.total = d.data.total;
    57.           }).catch(e => {
    58.  
    59.           })
    60.  
    61.  
    62.         }).catch(() => {
    63.           this.$message({
    64.             type: 'info',
    65.             message: '已取消删除'
    66.           });
    67.         });
    68.       },
    69.       dosub() {
    70.  
    71.         this.$refs['book'].validate((valid) => {
    72.           if (valid) {
    73.             alert('submit!');
    74.             let url = this.axios.urls.SYSTEM_BookADD;
    75.             if (this.title == '编辑窗体') {
    76.               url = this.axios.urls.SYSTEM_BookUPD;
    77.             }
    78.             let params = {
    79.               id: this.book.id,
    80.               bookname: this.book.bookname,
    81.               price: this.book.price,
    82.               booktype: this.book.booktype
    83.             }
    84.             this.axios.post(url, params).then(d => {
    85.               console.log(d);
    86.               this.clear();
    87.               this.query({});
    88.               this.tableData = d.data.rows;
    89.               this.total = d.data.total;
    90.             }).catch(e => {
    91.  
    92.             })
    93.  
    94.           } else {
    95.             console.log('error submit!!');
    96.             return false;
    97.           }
    98.         });
    99.  
    100.  
    101.  
    102.       },
    103.       clear() {
    104.         //初始化窗体
    105.         this.dialogFormVisible = false;
    106.         this.title = '新增窗体';
    107.         this.book = {
    108.           id: '',
    109.           bookname: '',
    110.           price: '',
    111.           booktype: ''
    112.         }
    113.       },
    114.       open(idx, row) {
    115.         //打开窗体的方法
    116.         this.dialogFormVisible = true;
    117.         if (row) {
    118.           this.title = '编辑窗体';
    119.           this.book.id = row.id;
    120.           this.book.bookname = row.bookname;
    121.           this.book.price = row.price;
    122.           this.book.booktype = row.booktype;
    123.         }
    124.       },
    125.       handleSizeChange(r) {
    126.         //当页大小发生变化
    127.         let params = {
    128.           bookname: this.bookname,
    129.           rows: r,
    130.           page: this.page
    131.         }
    132.         // console.log(params)
    133.         this.query(params);
    134.       },
    135.       handleCurrentChange(p) {
    136.         //当前页码大小发生变化
    137.         let params = {
    138.           bookname: this.bookname,
    139.           rows: this.rows,
    140.           page: p
    141.         }
    142.         // console.log(params)
    143.         this.query(params);
    144.       },
    145.       query(params) {
    146.         //获取后台请求书籍数据的地址
    147.         let url = this.axios.urls.SYSTEM_BookList;
    148.         this.axios.get(url, {
    149.           params: params
    150.         }).then(d => {
    151.           console.log(url)
    152.           this.tableData = d.data.rows;
    153.           this.total = d.data.total;
    154.         }).catch(e => {});
    155.       },
    156.       onSubmit() {
    157.         let params = {
    158.           bookname: this.bookname
    159.         }
    160.         console.log(params)
    161.         this.query(params);
    162.         this.bookname = ''
    163.       }
    164.     },
    165.     created() {
    166.       this.query({});
    167.       this.types = [{
    168.         id: 1,
    169.         name: '玄幻'
    170.       }, {
    171.         id: 2,
    172.         name: '动作'
    173.       }, {
    174.         id: 3,
    175.         name: '爱情'
    176.       }, {
    177.         id: 4,
    178.         name: '伦理'
    179.       }, {
    180.         id: 5,
    181.         name: '搞笑'
    182.       }];
    183.     }
    184.   }

    表单验证

    表单验证在我们

    正则

    编写我们的正则方法

    1.   rules: {
    2.           bookname: [{
    3.             required: true,
    4.             message: '请输入书籍名称',
    5.             trigger: 'blur'
    6.           }],
    7.           price: [{
    8.             required: true,
    9.             message: '请输入书籍价格',
    10.             trigger: 'blur'
    11.           }],
    12.           booktype: [{
    13.             required: true,
    14.             message: '请输入书籍类型',
    15.             trigger: 'blur'
    16.           }]
    17.         }

    其次就是我们的的验证我们所写的正则 

    1.  dosub() {
    2.  
    3.         this.$refs['book'].validate((valid) => {
    4.           if (valid) {
    5.             let url = this.axios.urls.SYSTEM_BookADD;
    6.             if (this.title == '编辑窗体') {
    7.               url = this.axios.urls.SYSTEM_BookUPD;
    8.             }
    9.             let params = {
    10.               id: this.book.id,
    11.               bookname: this.book.bookname,
    12.               price: this.book.price,
    13.               booktype: this.book.booktype
    14.             }
    15.             this.axios.post(url, params).then(d => {
    16.               console.log(d);
    17.               this.clear();
    18.               this.query({});
    19.               this.tableData = d.data.rows;
    20.               this.total = d.data.total;
    21.             }).catch(e => {
    22.  
    23.             })
    24.  
    25.           } else {
    26.             console.log('error submit!!');
    27.             return false;
    28.           }
    29.         });
    30.  
    31.  
    32.  
    33.       },

  • 相关阅读:
    CentOS8安装SystemTap小记
    多项式回归与模型泛化
    详谈判断点在多边形内的七种方法
    docker集群主从容错 扩容 缩容
    ipv6进行ping6测试报错connect: Invalid argument解决方法
    vue与es6的知识点
    C++ Reference: Standard C++ Library reference: C Library: cuchar
    微原基础题02
    某985证书站挖掘记录
    vscode插件
  • 原文地址：https://blog.csdn.net/djssubddbj/article/details/133699376