123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158 |
- "use strict";
- var formMixin = {
- data: {
- validData: {},
- rules: {
- title: [{
- required: true,
- type: 'string',
- message: '请输入文章标题',
- trigger: 'blur'
- }],
- label: [{
- required: true,
- message: '请输入文章标签',
- trigger: ['blur', 'change']
- }],
- keyword: [{
- required: true,
- message: '请输入文章seo关键词',
- trigger: 'blur'
- }],
- publisher: [{
- required: true,
- message: '请输入发布人',
- trigger: 'blur'
- }],
- recommendContent: [{
- required: true,
- message: '请输入文章推荐语',
- trigger: 'blur'
- }],
- articleContent: [{
- required: true,
- message: '请输入文章内容',
- trigger: 'change'
- }],
- typeId: [{
- required: true,
- message: '请选择文章分类',
- trigger: 'change'
- }],
- guidanceImage: [{
- required: true,
- message: '请上传文章引导图',
- trigger: 'change'
- }],
- status: [{
- required: true,
- message: '请选择文章状态',
- trigger: 'change'
- }]
- }
- },
- mounted: function mounted() {
- //初始化表单验证
- this.initValidForm(this.formData);
- },
- created: function created() {
- //初始化验证关系对象
- this.initValidData();
- },
- methods: {
- //初始化验证关系对象
- initValidData: function initValidData() {
- for (var key in this.rules) {
- this.$set(this.validData, key, {
- valid: true,
- message: ''
- });
- }
- },
- //初始化表单验证
- initValidForm: function initValidForm(formData) {
- var _this = this;
- var that = this;
- var _loop = function _loop(key) {
- var rules = _this.rules[key];
- var input = document.querySelector(".form-item[prop=\"".concat(key, "\"] input"));
- var textarea = document.querySelector(".form-item[prop=\"".concat(key, "\"] textarea"));
- var trigger = rules[0].trigger.toString();
- if (trigger.indexOf('blur') > -1) {
- if (input) {
- input.addEventListener('blur', function () {
- that.validInputHandle(formData, key, rules);
- });
- }
- if (textarea) {
- textarea.addEventListener('blur', function () {
- that.validInputHandle(formData, key, rules);
- });
- }
- }
- if (trigger.indexOf('change') > -1) {
- var str = 'formData.' + key;
- that.$watch(str, function (newVal, oldVal) {
- that.validInputHandle(formData, key, rules);
- });
- }
- };
- for (var key in this.rules) {
- _loop(key);
- }
- },
- //数据校验
- validInputHandle: function validInputHandle(formData, key, rules) {
- var validData = {
- valid: true,
- message: ''
- };
- rules.forEach(function (rule, index) {
- if (!validData.valid) return; // 字符长度
- var len = formData[key].toString().trim().length; // 是否必填
- if (rule.required && !formData[key]) {
- validData.valid = false;
- validData.message = rule.message || '';
- } // 最大值最小值
- if (rule.maxLength && len < rule.minLength || rule.maxLength && len > rule.maxLength) {
- validData.valid = false;
- validData.message = rule.message || '';
- } // 自定义校验规则
- if (rule.pattern && !rule.pattern.test(formData[key])) {
- validData.valid = false;
- validData.message = rule.message || '';
- }
- });
- this.validData[key] = validData;
- },
- // 验证全部数据
- validAll: function validAll(formData) {
- for (var key in this.rules) {
- var rules = this.rules[key];
- this.validInputHandle(formData, key, rules);
- }
- for (var _key in this.validData) {
- // console.log(key, this.validData[key].valid);
- if (!this.validData[_key].valid) {
- return Promise.reject(false);
- }
- }
- return Promise.resolve(true);
- }
- }
- };
|