Question

我正在尝试创建一个vue组件来检查数据库中是否有给定的输入。我正在使用vue组件内的axios对服务器进行调用。出于某种原因，当我在电子邮件中键入@符号时，它会中断。到目前为止我的代码是：

这是后端。

class TestController extends Controller
{

    public function verifyName($name){

        if (request()->wantsJson()){

            $names=User::where('name', $name)->count();
            if ($names>0)
                return 1;
            if ($names==0)
                return 0;
        }
    }

    public function verifyEmail($email){

        if (request()->wantsJson()){
            $emails=User::where('email', $email)->count();
            if ($emails>0)
                return 1;
            if ($emails==0)
                return 0;
        }
    }


}

这是vue脚本：

<script>
    export default {

        data(){
            return{
                name: '',
                email: '',
                nameTaken: false,
                emailTaken: false,
                nameAvailable:false,
                emailAvailable:false,
                nameIsTooShort:false

            }
        },
        methods:{
            verifyName(){
                axios.get('/verify/'+this.name)
                     .then((response) => {
                       if (response.data){
                           this.nameTaken=true;
                           this.nameAvailable=false
                       }
                       if(!response.data){
                           this.nameTaken = false;
                           this.nameAvailable=true
                       }
                    });
            },

            verifyEmail(){
                axios.get('/verify/'+this.email)
                    .then((response) => {
                        if (response.data){
                            this.emailTaken=true;
                            this.emailAvailable=false

                        }
                        if(!response.data){
                            this.emailTaken = false;
                            this.emailAvailable=true
                        }
                    });
            }

        }
    }
</script>

这是我的路线：

Route::get('/verify/{name}','TestController@verifyName');
Route::get('/verify/{email}','TestController@verifyEmail');

这是一个小gif来展示它。

根据要求，这是我显示消息的html部分。

   <div class="field-body">
    <div class="field">
           <p class="control">
          <input class="input" id="email" type="email" name="email" value="{{ old('email') }}" v-model="email"  @change="verifyEmail">
         <div class="help is-danger" v-show="emailTaken" v-cloak>This e mail is taken</div>
        <div class="help is-success" v-show="emailAvailable" v-cloak>Great. this email is available</div>
     </p>
 </div>
 </div>

感谢。

Answer 1

尝试使用laravel的验证器。

一种方法，在你的＆＃34; App \ Http \ Controllers \ Auth \ RegisterController＆＃34;

plt.vlines(df.log_time_1.index.to_datetime(), 0.3, 0.7, colors="r", lw=2)
plt.vlines(df.cm_time_4.index.to_datetime(), 0.3, 0.7, colors="b", lw=2)

记下use Illuminate\Support\Facades\Validator; protected function validator(array $data) { return Validator::make($data, [ 'name' => 'required|string|max:255|unique:users', 'email' => 'required|string|email|unique:users', 'password' => 'required|string|min:6|confirmed', ]); }规则，其中unique:xxxxx是您的表格。 https://laravel.com/docs/5.5/validation

如果电子邮件或名称不唯一，验证程序将返回错误响应。所以你会在注册函数的开头使用它。

xxxxx

Answer 2

我认为这是因为你正在使用＆＃34; @＆＃34; url字符串中的符号。这是保留字符。（Which characters make a URL invalid?）解决方案：在邮件请求的json主体中发送电子邮件到服务器上的验证。

将Vue.Js组件中的axios发送到laravel后端的电子邮件地址失败

2 个答案: