精华内容
下载资源
问答
  • VUE表单验证

    2020-09-05 10:27:05
    VUE表单验证 v-model.number=“activityForm.Donate” 只能输入整数

    VUE表单验证
    v-model.number=“activityForm.Donate” 只能输入整数

    展开全文
  • Vue表单验证

    2021-05-10 10:53:16
    Vue表单验证1 前端1 标签的内容1 在`el-form`标签中定义如下属性2 `ref="edit-form"` 用于调用关于表单的方法3 `:model="form"` `el-input`标签中表单值`v-model`的父属性4 `:rules="rulers"` `el-form-item`标签中...

    目录复制

    1 前端

    前端发给后端的是明码,在后端进行加密。

    1 template标签的内容

    1 在el-form标签中定义如下属性

    1 ref="edit-form" 用于调用关于表单的方法

    2 :model="form" el-input标签中表单值v-model的父属性

    3 :rules="rulers" el-form-item标签中验证规则prop的父属性

    2 在el-form-item标签中定义 prop="name"属性 用于表单校验

    3 在el-input标签中定义 v-model="form.name""属性用于存放表单值

    <template>
    	<div>
    		<el-form  ref="edit-form"    :model="form" :rules="rulers" label-width="100px">
    			<el-form-item label="登入名" prop="longinName">
    				<el-input v-model="form.longinName"></el-input>
    			</el-form-item>
    
    			<el-form-item label="姓名" prop="name">
    				<el-input v-model="form.name"></el-input>
    			</el-form-item>
    
    
    			<el-form-item label="邮箱" prop="email">
    				<el-input v-model="form.email"></el-input>
    			</el-form-item>
    
    
    			<el-form-item label="手机号" prop="phone">
    				<el-input v-model="form.phone"></el-input>
    			</el-form-item>
    
    
    			<el-form-item label="密码" prop="rawPassword">
    				<el-input v-model="form.rawPassword" show-password></el-input>
    			</el-form-item>
    
    
    
    			<el-form-item label="头像" prop="icon">
    				<el-input v-model="form.icon"></el-input>
    			</el-form-item>
    
    
    			<el-form-item>
    				
    				<el-button type="primary" plain @click="save">保存</el-button>
    			</el-form-item>
    		</el-form>
    	</div>
    </template>
    

    2 script 和 style标签的内容

    <script>
    	export default {
    		name: 'UserEdit',
    
    //  props 是用于接收父组件传递过来的属性 名称和父组件绑定的属性名一致
    // 如:id="dialog.id"  中:id  :表示绑定  id为传递过来的属性名
    
    		props: {
    			show: {
    				type: Boolean,
    				default: null
    			},
    			
    			id: {
    				type: Number,
    				default: null
    			}
    
    		},
    
    		data() {
    			
    			
    //   定义一个异步请求 用于判断表单中的元素是否重复
    //   在rulers中用  validator: checkData 调用
    
    
    			const checkData =( rule,value,callback) =>{
    				
    // 请求地址按需求修改  value: 表示后端用value来接收这个值
    				this.get('/ums-user/check',{value: value},response =>{
    					if(response){
    						callback()
    					}else{
    						callback(new Error('存在相同数据'))
    					}
    				})
    			}
    			
    //   表单的属性和值
    			return {
    				form: {
    					longinName: '',
    					name: '',
    					email: '',
    					phone: '',
    					rawPassword: '',
    					icon: '',
    					active: '1'
    				},
    				
    // 表单验证 其中登入名 手机号 和邮箱有重复验证  即这三个数据不能相同
    // 手机号和邮箱有单独的格式验证
    				
    				rulers: {
    					name: [{
    							required: true,
    							message: '请输入姓名',
    							trigger: 'blur'
    						},
    						{
    							min: 1,
    							max: 20,
    							message: '长度在 1 到 20 个字符',
    							trigger: 'blur'
    						}
    					],
    
    					longinName: [{
    							required: true,
    							message: '请输入登入名',
    							trigger: 'blur'
    						},
    						{
    							min: 1,
    							max: 20,
    							message: '长度在 1 到 20 个字符',
    							trigger: 'blur'
    						},
    						{
    							validator: checkData ,trigger: 'blur'
    						},
    						
    					],
    
    					email: [{
    							required: true,
    							message: '请输入邮箱',
    							trigger: 'blur'
    						},
    						{
    							min: 1,
    							max: 50,
    							message: '长度在 1 到 50 个字符',
    							trigger: 'blur'
    						},
    
    						{
    							type: 'email',
    							message: '格式不符,请输入正确的邮箱',
    							trigger: 'blur'
    						},
    						
    						{
    							validator: checkData ,trigger: 'blur'
    						},
    						
    						
    					],
    
    					phone: [{
    							required: true,
    							message: '请输入手机号',
    							trigger: 'blur'
    						},
    						{
    							min: 1,
    							max: 20,
    							message: '长度在 1 到 20 个字符',
    							trigger: 'blur'
    						},
    
    						{
    							pattern: /^1([38][0-9]|4[5-9]|5[0-3,5-9]|66|7[0-8]|9[89])[0-9]{8}$/,
    							message: '格式错误',
    							trigger: 'blur'
    						},
    						
    						{
    							validator: checkData ,trigger: 'blur'
    						},
    					],
    
    					rawPassword: [{
    							required: true,
    							message: '请输入密码',
    							trigger: 'blur'
    						},
    						{
    							min: 1,
    							max: 20,
    							message: '长度在 1 到 20 个字符',
    							trigger: 'blur'
    						}
    					],
    
    				}
    
    			}
    
    		},
    
    		created() {
    			if (this.id) {
    				this.getOne(this.id)
    			}
    		},
    
    // 如果表单验证正确后才进行保存
    		methods: {
    			save() {
    				
    				// 先在form表单上定义"ref='edit-form'" 然后在此处引用
    				this.$refs['edit-form'].validate(valid =>{
    					if(valid){
    						this.post('/ums-user/save', this.form, response => {
    							this.$emit('update:show', false)
    							this.$emit('getTableData')
    						})
    					}
    					
    				})
    				
    			
    			},
    
    
    			getOne() {
    				this.get('/ums-user/getOne', {
    					id: this.id
    				}, response => {
    					this.form = response
    				})
    			}
    
    
    
    
    		}
    
    	}
    </script>
    
    <style scoped=" lang=" less">
    </style>
    </script>
    
    

    2 后端

    1 条件查询数据库,有没有相同的用户名或手机号/或邮箱

        @GetMapping("/check")
        ResultJson check(String value){
            return ResultJson.success(iUmsUserService.check(value)==0);
        }
    
    
      public int check(String value) {
            QueryWrapper<UmsUser> wrapper = new QueryWrapper<UmsUser>();
            wrapper.eq("longin_name", value)
                    .or().eq("email", value)
                    .or().eq("phone", value);
    
            return this.count(wrapper);
    
        }
    

    2 给明码加密

    1 引入spring security

    		 <dependency>
                    <groupId>org.springframework.security</groupId>
                    <artifactId>spring-security-core</artifactId>
                    <version>5.3.3.RELEASE</version>
    		 </dependency>
    

    2 把密码加密交给spring管理

    @Configuration
    public class UserConfig {
        @Bean
    
        BCryptPasswordEncoder getPasswordEncoder(){
           return new BCryptPasswordEncoder();
        }
    }
    
    

    3 在实体类中加入明码属性 给一个不在用户表的注解

        @TableField(exist = false)
        private String rawPassword;
    
    展开全文
  • 主要介绍了vue表单验证你真的会了吗?vue表单验证(form)validate,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • vue 表单验证

    2020-08-20 17:05:39
    表单验证 首先要给表单传入一个表单验证规则对象 这个表单严验证对象在data中定义,他的字段名是一个数组的形式,也就是说我们可以对一个规则字段定义多个验证,就比如这个name定义了不能为空和字符长度在哪3-5之间...

    表单验证

    首先要给表单传入一个表单验证规则对象
    在这里插入图片描述

    这个表单严验证对象在data中定义,他的字段名是一个数组的形式,也就是说我们可以对一个规则字段定义多个验证,就比如这个name定义了不能为空和字符长度在哪3-5之间
    在这里插入图片描述
    最后一步就是在form-item中将prop 属性设置为要检验的字段名即可
    在这里插入图片描述

    展开全文
  • VUE表单验证此示例是一个用VUE验证表单字段的示例。表单外观如下图。register.html代码如下:注册注册页面用户名:[[ username_msg ]]密码:[[ pwd_msg ]]确认密码:[[ cpwd_msg ]]手机号:[[ phone_msg ]]同意协议...

    VUE表单验证

    此示例是一个用VUE验证表单字段的示例。

    表单外观如下图。

    register.html代码如下:

    注册

    注册页面

    用户名:

    [[ username_msg ]]

    密码:

    [[ pwd_msg ]]

    确认密码:

    [[ cpwd_msg ]]

    手机号:

    [[ phone_msg ]]

    同意协议

    [[ allow_msg ]]

    register.js代码如下:

    var vm = new Vue({

    el:'#app',

    delimiters:['[[', ']]'],

    data:{

    host:host,

    // 这里对应v-show

    vshow_username:false,

    vshow_pwd:false,

    vshow_cpwd:false,

    vshow_phone:false,

    vshow_allow:false,

    // 这里对应错误信息

    username_msg:'',

    pwd_msg:'',

    cpwd_msg:'',

    phone_msg:'',

    allow_msg:'',

    // 这里的变量对应v-model

    vmodel_username:'',

    vmodel_password:'',

    vmodel_cpwd:'',

    vmodel_phone:'',

    vmodel_allow:true

    },

    methods:{

    // 这里对应@blur

    blur_username:function(){

    // 检查正则匹配

    var re_username = /^[a-zA-Z0-9_-]{5,20}$/;

    if(re_username.test(this.vmodel_username)){

    this.vshow_username = false;

    }

    else{

    this.username_msg = '不符合正则:^[a-zA-Z0-9_-]{5,20}$';

    this.vshow_username = true;

    }

    },

    blur_pwd:function(){

    // 检查正则匹配

    var re_pwd = /^[0-9A-Za-z]{8,20}$/;

    if(re_pwd.test(this.vmodel_password)){

    this.vshow_pwd = false;

    }

    else{

    this.pwd_msg = '不符合正则:^[0-9A-Za-z]{8,20}$';

    this.vshow_pwd = true;

    }

    },

    blur_cpwd:function(){

    // 检查是否与password一样

    if(this.vmodel_password == this.vmodel_cpwd){

    this.vshow_cpwd = false;

    }

    else{

    this.cpwd_msg = 'pwd!=cpwd';

    this.vshow_cpwd = true;

    }

    },

    blur_phone:function(){

    // 检查正则

    var re_phone = /^1[345789]\d{9}$/;

    if(re_phone.test(this.vmodel_phone)){

    this.vshow_phone = false;

    }

    else{

    this.phone_msg = '不符合正则:^1[345789]\d{9}$';

    this.vshow_phone = true;

    }

    },

    }

    });

    v-model可以实时接收input标签中填入的值。在本示例中,vue对象获取v-model可以获取填入input中的值,然后进行验证。

    结果如图:

    展开全文
  • vue表单验证

    2020-03-05 18:30:08
    <template> <div> <!-- 登录表单 --> <el-form :model="loginForm" :rules="loginFormRules" label-width="0px" > <!-- 用户名 --> ...
  • ## antd-for-vue 表单验证失效 自定义表单验证使表单非空验证失效(其他验证失效)##### antd 的 表单校验方法包括 validateFields 和 validateFieldsAndScroll里面可以接收校验字段数组, options, 和一个回调函数* ...
  • vue表单验证组件 v-verify-plugin
  • 主要为大家详细介绍了Vue表单验证插件Vue Validator使用方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 首先需要自己写正则表达式,正则学得不好就不乱指点了=>方法1如果你是单独建的js文件 先引入正则表达式... { //regExpID自定义类名if (value === '') { //value 验证的值不要更改 会自动匹配你所需要验证的值 ca...
  • 主要为大家详细介绍了Vue表单验证插件的制作过程,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • vue 表单验证并提交

    2021-04-17 16:21:20
    vue 表单验证并提交 一、常用验证方式1.data 中验证data 数据: 2.行内验证3.引入外部定义的规则 二、表单提交时验证1.表单的提交按钮2.ethods 方法 一、常用验证方式 vue 中表单字段验证的写法和方式有...
  • VUE 表单验证插件

    千次阅读 2019-04-26 16:37:32
    /** * VUE 表单验证插件 * User: liupeilong * Date: 2019/4/26 * Time: 10:50 */ var validation = { install:function(Vue, options){ var validationConfig = { listenerEvent:"change", ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 2,430
精华内容 972
关键字:

vue表单验证

vue 订阅