laravel8实现web前端validate验证

最新推荐文章于 2024-09-23 11:02:39 发布

daxianyu666

最新推荐文章于 2024-09-23 11:02:39 发布

阅读量960

点赞数

文章标签：小程序微信小程序微信

本文链接：https://blog.csdn.net/daxianyu666/article/details/121486126

版权

本文介绍了如何在菜鸟驿站的网页中使用jQuery Validation库进行表单验证，包括添加验证规则、自定义验证规则和两种提交方式（ajax与同步）。重点讲解了必填项和手机号验证，以及验证通过后的提交策略。

摘要由CSDN通过智能技术生成

1.在菜鸟驿站中引入线上js验证文件

    <script src="http://static.runoob.com/assets/jquery-validation-1.14.0/lib/jquery.js"></script>
    <script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script>
    <script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/localization/messages_zh.js"></script>

2.在form表单中添加挂载点；这里采用id的形式

<form action="{{ route('admin.notice.store') }}" method="post" class="form form-horizontal" id="form-member-add">
@csrf
<form>

3.在挂载点中填写要验证的规则 ,以及验证的自定义信息

<script>
$("#form-member-add").validate({
        // 规则
        rules: {
          // 表单元素名称,也就是name的值
          username: {
            // 验证规则
            //不能为空
            required: true,
            //最小两位
            minlength: 2
          }
        },
        messages: {
          username: {
            required: "请输入用户名",
            minlength: "用户名必需由两个以上字符组成"
          }
        },

})
</script>

4.如果不通过会提示，不会提交表单

5.验证成功后选择提交方式，这里介绍两种

ajax提交

<script>
//表示捕获form表单中的所有值,采用ajax方式提交，路由则是form中action的值

$("#form-member-add").validate({
        // 规则
        rules: {
          // 表单元素名称,也就是name的值
          username: {
            // 验证规则
            //不能为空
            required: true,
            //最小两位
            minlength: 2
          }
        },
        messages: {
          username: {
            required: "请输入用户名",
            minlength: "用户名必需由两个以上字符组成"
          }
        },
        submitHandler: function(form) {      
          $(form).ajaxSubmit({
            //如果不加datatype是无法接收到回调内容
            datatype:'JSON',
            success: function (res) {
                //console.log(res)
                if (res.code == 200){
                    parent.location.reload();
                }
            }
          });     
       } 
})

</script>

同步跳转提交

<script>
//表示捕获form表单中的所有值,采用同步方式提交，路由则是form中action的值

$("#form-member-add").validate({
        // 规则
        rules: {
          // 表单元素名称,也就是name的值
          username: {
            // 验证规则
            //不能为空
            required: true,
            //最小两位
            minlength: 2
          }
        },
        messages: {
          username: {
            required: "请输入用户名",
            minlength: "用户名必需由两个以上字符组成"
          }
        },
        submitHandler: function (form) {
          // 同步表单提交
          form.submit();
        }
})
</script>

6.这里手机号规则需要自己写，线上js以及线下js 都是需要自定义的，复制以下代码将phone作为验证规则和以上的非空验证用法一样 phone：true 即可完成对手机号的验证

      // 自定义验证规则
      // 手机号验证
      jQuery.validator.addMethod("phone", function (value, element) {
        // patrn = /^(\+86-)?1[3-9]\d{9}$/;
        var reg1 = /^\+86-1[3-9]\d{9}$/;
        var reg2 = /^1[3-9]\d{9}$/;
        var ret = reg1.test(value) || reg2.test(value);
        return this.optional(element) || ret;
      }, "请输入正确的手机号码");

7.这是最基本的应用，菜鸟也有详细解释

jQuery Validate | 菜鸟教程 (runoob.com)https://www.runoob.com/jquery/jquery-plugin-validate.html