vue3

约 207 字小于 1 分钟

2024-03-16

基础结构

	Vue.createApp({
        data() {
          return { };
        },
				created() {},
        methods: {
          openurl(url) {},
        },
      }).mount("#app");

rule form表单的规则验证

/*其中name为prop名
	type：类型
	required：是否必选项（此栏是否为空）
	message：报错信息
	trigger：触发方式（
	blur ：失去焦点时进行验证 	常用：对 input 输入框的验证
	change ：当值发生变化时进行验证*/
    rules: {
      phone: [
          {
            pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
            trigger: 'blur',
              message: '请输入正确的号码',
            },
          ],
          email: [
            {
              pattern: /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/,
              trigger: 'blur',
              message: '邮箱格式不正确',
            },
          ],
          password: [
            {
              required: true,
              trigger: 'blur',
              validator: (rule, value, callback) => {
                if (!value) {
                  callback(new Error('请输入密码'))
                } else if (value.length < 6) {
                  callback(new Error('密码不得少于6位'))
                } else if (value === '123456') {
                  callback(new Error('密码过于简单'))
                }
                callback()
              },
            },
          ],
      },