Laravel, vee-validate, 阿波罗 自定义表单时时验证

废话不多说，咱直接上代码！这里以laravel, vue, vue-apollo为例

这里涉及到其他插件的配置使用，请参考链接：

• vue:https://github.com/vuejs/vue
• vue-apollo: https://github.com/Akryum/vue-apollo
• vee-validate:https://github.com/baianat/vee-validate

namespace YouNamespace;

use GraphQL\Type\Definition\Type;
use Folklore\GraphQL\Support\Query;
use App\Contracts\UserInterface;
use App\User;

class UserFieldQuery extends Query
{
    protected $attributes = [
        'name'  => 'User field Query'
    ];

    public function type()
    {
        return Type::boolean();
    }

    public function args()
    {
        return [
            'field' => [
                'type' => Type::nonNull(Type::string()),
            ],
            'value' => [
                'type' => Type::nonNull(Type::string()),
            ]
        ];
    }

    public function resolve($root, $args)
    {
        [$field, $value] = array_values($args);

        // 定义合法的字段验证。
        switch ($field) {
            case 'mobile_phone':
                    return User::findByMobilePhone($value) instanceof UserInterface;
                break;
            case 'nikename':
                    return User::findByNikename($value) instanceof UserInterface;
                break;
        }

        return false;
    }
}

添加查询到配置文件 config/graphql.php

'schemas' => [
    'default' => [
        'query' => [
            'user_field_exist' => 'YouNamespace\UserFieldQuery'
        ],
        // ...
    ]
]

import gql from 'graphql-tag';
import graphqlClient from '@/graphql';

class AsynFieldRemoteValidator {
    static async queryUserFieldUnique(field, value) {
        const {data} = await graphqlClient.query({
            query: gql`query UserFieldQuery($field: String!, $value: String!){
                user_field_exist(field: $field, value: $value)
            }`,
            variables: {
                field: field,
                value: value
            }
        });
        return data;
    }
}

export default AsynFieldRemoteValidator;

你的vue组件。在created()方法定义

import AsynFieldRemoteValidator from '@/support/asyn-field-remote-validator';
this.$validator.extend('unique_user_field', {
        getMessage(field, params, data) {
            return this.$t('core.message.unique_field', {field});
        },
        async validate(value, args) {
            const field = args[0];
            let result = value

            // 这里判断验证手机号码时处理手机号码格式。使用`libphonenumber-js` 参考：https://github.com/catamphetamine/libphonenumber-js， 这里不多介绍`libphonenumber-js`使用
            if (field === 'mobile_phone') {
                result = parseIncompletePhoneNumber(value, local.alias.toUpperCase());
            }

            const {user_field_exist} = await AsynFieldRemoteValidator.queryUserFieldUnique(field, result);

            return {
                valid: user_field_exist === false,
                data: {
                    field: result
                }
            };
        }
    })

<input
         type="tel"
         v-model="mobile_phone"
         :placeholder="188 **** ****"
         :state="validateState('mobile_phone')"
         :data-vv-as="手机号码"
         name="mobile_phone"
         v-validate="'required|mobile_pohone_format|unique_user_field:mobile_phone'"

文章写得非常粗暴，大神多多指教！

本作品采用《CC 协议》，转载必须注明作者和本文链接