博主信息
李东亚¹⁸⁰³⁹⁵⁴⁰¹²⁰
博文
142
粉丝
6
评论
7
访问量
34638
积分:0
P豆:290

前端插件:form.js和validate.js的简单入门使用

2021年03月19日 17:43:14阅读数:228博客 / 李东亚¹⁸⁰³⁹⁵⁴⁰¹²⁰/ web前端学习

form.js的简单入门使用

1.先引入form.js文件(在使用form.js前需要先引入query.js文件)
2.通过$('form')ajaxSubmit({})方法来调用form插件
3.$('form').ajaxSubmit({})配置和ajax的配置基本一直;

  • url:请求地址
  • type:请求方法
  • dataType:返回数据类型
  • success:function(res){}服务端返回结果处理函数
  • error:接收请求失败的结果,可以用闭包处理

4.form.js把表单中的数据提前封装好了,不要在配置表单中的数据,直接提交即可(一般表单中的值通过name属性来匹配)


validate.js表单验证插件

1.先引入jquery.validate.min.js,validate-methods.js:为扩展的验证规则,messages_zh.min.js: 为验证提示文件;(在使用form.js前需要先引入query.js文件)
2.$(form).validate({})方法来配置验证规则

  • rules:{}通过对象的形式来设置form表单(各个name)的验证规则
  • messages:{}要与rules保持一直,来设置验证规则的提示信息
  • errorElement:设置错误信息的html标签
  • errorPlacement:function(error,element){}:设置错误信息的位置和样式
  • highlight:function(element,errorClass,validClass){}:设置错误的处的样式
  • unhighlight:function(element,errorClass,validClass){}:设置错误的处的样式

3.$.validate.setDefaults({});配置validate的默认项
4.在$.validate.setDefaults({submitHandler:function(form){
验证后得表单提交配置}});
5.submitHandler:验证规则通过后提交字段,可以在validate方法中配置,也可以在setDefaults中配置
6.常见的字段规则和规则提示字段有

form.js和validate插件使用案例

1.登陆表单

  1. <form role="form" id="quickForm">
  2. <div class="card-body">
  3. <div class="form-group">
  4. <label for="exampleInputEmail1">邮箱账户</label>
  5. <input type="email" name="email" class="form-control" id="exampleInputEmail1" placeholder="请输入你的账户邮箱">
  6. </div>
  7. <div class="form-group">
  8. <label for="exampleInputPassword1">密码</label>
  9. <input type="password" name="password" class="form-control" id="exampleInputPassword1" placeholder="请输入你的密码">
  10. </div>
  11. <div class="form-group">
  12. <label for="exampleInputPassword1">验证码</label>
  13. <div style="display:flex;">
  14. <input type="text" name="captcha" class="form-control" style="width:40%;" id="exampleInputCaptcha" placeholder="验证码">
  15. <img style="width:50%; height: 38px;margin-left: 10px;" onclick="getcapache()" src="{:url('login/verify')}" alt="验证码">
  16. </div>
  17. </div>
  18. </div>
  19. <!-- /.card-body -->
  20. <div class="card-footer">
  21. <button type="submit" class="btn btn-primary form-control">登陆</button>
  22. </div>
  23. </form>

2.表单验证

  1. $(document).ready(function() {
  2. $.validator.setDefaults({
  3. submitHandler: function() {
  4. // alert("表单前端验证通过!");
  5. $("#quickForm").ajaxSubmit({
  6. url: "{:url('/admin/login/index')}",
  7. dataType: null,
  8. type: "POST",
  9. success: function(res) {
  10. // console.log(JSON.parse(res));
  11. res = JSON.parse(res);
  12. if (res["code"]) {
  13. layer.msg(res["msg"], {
  14. // skin: 'layui-layer-lan',
  15. icon: 3
  16. });
  17. } else {
  18. layer.confirm("确定登陆?", {
  19. btn: ['确定'] //按钮
  20. }, function() {
  21. layer.msg(res["msg"], {
  22. icon: 1
  23. });
  24. window.location.href = "{:url('/admin/index/index')}";
  25. });
  26. }
  27. }
  28. });
  29. }
  30. });
  31. $('#quickForm').validate({
  32. rules: {
  33. email: {
  34. required: true,
  35. email: true,
  36. },
  37. password: {
  38. required: true,
  39. minlength: 6
  40. },
  41. captcha: {
  42. required: true,
  43. remote: {
  44. url: 'checkverify',
  45. type: 'POST'
  46. }
  47. }
  48. },
  49. messages: {
  50. email: {
  51. required: "账号不能为空",
  52. email: "账户必须为邮箱"
  53. },
  54. password: {
  55. required: "密码不能为空",
  56. minlength: "密码不能少于6位"
  57. },
  58. captcha: {
  59. required: "验证码不能为空",
  60. remote: "验证码不正确"
  61. }
  62. },
  63. errorElement: 'span',
  64. errorPlacement: function(error, element) {
  65. error.addClass('invalid-feedback');
  66. element.closest('.form-group').append(error);
  67. },
  68. highlight: function(element, errorClass, validClass) {
  69. $(element).addClass('is-invalid');
  70. },
  71. unhighlight: function(element, errorClass, validClass) {
  72. $(element).removeClass('is-invalid');
  73. }
  74. });
  75. });

全部评论

文明上网理性发言,请遵守新闻评论服务协议

条评论
  • 现在都可以进行excel文导出操作。下面是使导出表格成excel文示例组是基于ng-alain封装 XlsxService,XlsService是基于sheetjs开发

    2020-07-11

    502

    webpack是目最为流行打包工具之一,其配置,功能强大,拥有丰富加载器系统,为开发者提供了诸多便利。笔者默认各位看官在阅读本章之已经有了一定使经验...
    点击上方“程序人生”,选择“置顶公众号”第一时间关注程序猿(媛)身边故事PHP究竟是不是最好语言,一直以来是程序员最大“争议”,但毋庸置疑是,PHP绝对是最有力量变成语言,也是你最值得学习语言