laravel 验证，如何在客户端添加验证规则？答案

【问题标题】：laravel validation, how to add validation rule on client side?laravel 验证，如何在客户端添加验证规则？
【发布时间】：2021-02-27 19:26:13
【问题描述】：

//html code
<form>
<input type="radio" id="defult" name="price_type" value="default">
<label for="defult">Default Price</label><br>
<input type="radio" id="custom" name="price_type" value="custom">
<label for="custom">Custom Price</label><be>

<input placeholder="Custom Price" class="form-control" name="custom_price">
</form>

$('input[type=radio][name=price_type]').change(function() {
    if (this.value == 'default') {
        //make custom_price optional
    }
    else if (this.value == 'custom') {
        //make custom_price required
    }

});

实际上，我有一个自定义价格或默认价格的单选框，如果用户选择自定义价格然后想要输入[name=custom_price] 必填或者如果用户选择默认价格然后将 input[name=custom_price] 可选。

【问题讨论】：

你不能在前端代码上使用后端验证，但是你可以通过 ajax、axios 等 XHR 请求来做到这一点

标签： javascript jquery laravel validation laravel-5

【解决方案1】：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form>
        <input type="radio" id="default" name="price_type" value="default">
        <label for="default">Default Price</label><br>
        <input type="radio" id="custom" name="price_type" value="custom">
        <label for="custom">Custom Price</label><br>
        <input placeholder="Custom Price" class="form-control" name="custom_price" required>
        <input type="submit" value="Submit">
    </form>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script>
    $('input[type=radio][name=price_type]').change(function() {
        if (this.value == 'default') {
            //make custom_price optional
            $('input[name=custom_price]').prop('required', false);
        }
        else if (this.value == 'custom') {
            //make custom_price required
            $('input[name=custom_price]').prop('required', true);
        }
    });
    </script>
</body>
</html>

【讨论】：