前端基础 - JQuery 简单的表单校验器

简介: 前端基础 - JQuery 简单的表单校验器

JQuery 简单的表单校验器

需求及导入步骤

  • 导入jquery.js文件
  • 导入jquery-validate.js文件(jquery的校验器插件)
  • 导入messages_zh.js国际化文件
  • 对表单进行校验
在页面加载成功后获取表单对象.validate({
            rules:{},     //校验规则
            messages:{}   //自定义提示信息
          })

rules写法:

要校验的name属性:{
          校验器1:取值,
          校验器2:取值
        }
注意:多个校验规则之间  使用,分割

message写法:

要校验的name属性:{
          校验器1:"自定义提示信息1",
          校验器2:"自定义提示信息2"
      }

校验器:

required true/false 必填校验

number true/false 数字校验

min 数字 最小值

max 数字 最大值

range 数值区间 [最小值,最大值]

minLength|maxLength|rangLength 最小值|最大值|长度区间

email: email 邮箱校验 @ 1@x

equalTo: jquery对象 重复性校验

案例:

效果图:

代码:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
  </head>
  <script type="text/javascript" src="../js/jquery-1.11.0.min.js"></script>
  <script type="text/javascript" src="../js/jquery.validate.js"></script>
  <script type="text/javascript" src="../js/messages_zh.js"></script>
  <script>
    $(function() {
      //获取要校验的表单
      $("#formid").validate({
        rules: {
          username: {
            required: true
          },
          password: {
            required: true,
            number: true
          },
          repassword: {
            equalTo: $("#password")
          },
          email: {
            email: email
          }
        },
        messages: {
          username: {
            required: "用户名不能为空"
          },
          password: {
            required: "密码不能为空",
            number: "密码必须为数字"
          },
          repassword: {
            equalTo: "两次密码必须一致"
          },
          email: {
            email: "请输入格式为:*@*  邮箱"
          }
        }
      })
    })
  </script>
  <style>
  </style>
  <body>
    <form action="#" method="get" id="formid">
      <table width="60%" height="60%" align="center" bgcolor="#ffffff">
        <tr>
          <td colspan="3">会员注册USER REGISTER</td>
        </tr>
        <tr>
          <td width="20%">用户名:</td>
          <td width="80%"><input type="text" name="username" id="username"></td>
        </tr>
        <tr>
          <td>密码:</td>
          <td><input type="password" name="password" id="password"></td>
        </tr>
        <tr>
          <td>确认密码:</td>
          <td><input type="password" name="repassword" id="repassword"></td>
        </tr>
        <tr>
          <td>Email:</td>
          <td><input type="text" name="email" id="email"></td>
        </tr>
        <tr>
          <td>姓名:</td>
          <td><input type="text" name="name"></td>
        </tr>
        <tr>
          <td>性别:</td>
          <td>
            <input type="radio" name="sex" value="男" checked> 男
            <input type="radio" name="sex" value="女" />女
            <!--<label for="sex" class="error"></label>-->
          </td>
        </tr>
        <tr>
          <td>出生日期</td>
          <td>
            <input type="date" name="birthday">
          </td>
        </tr>
        <tr>
          <td>验证码</td>
          <td>
            <input type="text" name="checkcode">
          </td>
        </tr>
        <tr>
          <td colspan="2">
            <input type="submit" value="注册" />
          </td>
        </tr>
      </table>
    </form>
  </body>
</html>

目录
打赏
0
0
0
0
238
分享
相关文章
个人练习前端技术使用Bootstrap、JQuery、thymeleaf
个人练习前端技术使用Bootstrap、JQuery、thymeleaf
55 3
前端技术分享:使用Vue.js构建响应式表单
【10月更文挑战第1天】前端技术分享:使用Vue.js构建响应式表单
【前端web入门第二天】03 表单-下拉菜单 文本域 label标签 按钮 【附注册信息综合案例】
本文档详细介绍了HTML表单的多种元素及其用法,包括下拉菜单(`&lt;select&gt;` 和 `&lt;option&gt;`)、文本域(`&lt;textarea&gt;`)、标签解释(`&lt;label&gt;`)、各类按钮(`&lt;button&gt;`)及表单重置功能、无语义布局标签(`&lt;div&gt;` 和 `&lt;span&gt;`)以及字符实体的应用。此外,还提供了一个完整的注册信息表单案例,涵盖个人信息、教育经历和工作经历等部分,展示了如何综合运用上述元素构建实用的表单。
【前端web入门第二天】03 表单-下拉菜单 文本域 label标签 按钮 【附注册信息综合案例】
个人练习前端技术使用Bootstrap、JQuery、thymeleaf
个人练习前端技术使用Bootstrap、JQuery、thymeleaf
42 2
前端基础(七)_表单的基本组成与使用
本文详细介绍了HTML表单的基本组成和使用,包括`<form>`标签、`<input>`表单域、`<select>`下拉列表、`<textarea>`多行文本域等元素。文章解释了表单的提交方式(GET和POST)、表单域的各种类型(文本、密码、单选按钮、复选框等)、提交按钮和重置按钮的作用,以及如何通过`<label>`标签提高表单的可访问性。此外,还讨论了表单元素的属性,如`readonly`、`disabled`、`maxlength`等。
69 1
【前端web入门第二天】02 表单-input标签-单选框-多选框
本文介绍了HTML中`&lt;input&gt;`标签的基本使用方法及其应用场景,如登录、注册页面和搜索区域。通过设置`type`属性,可以实现文本框、密码框、单选框、多选框及文件上传等功能。此外,还详细说明了占位文本的使用、单选框的常用属性及多选框的默认选中状态,并提供了示例代码与效果展示。
149 7
精选八款包括可视化CMS,jquery可视化表单,vue可视化拖拉,react可视化源码
精选八款包括可视化CMS,jquery可视化表单,vue可视化拖拉,react可视化源码
82 0
这篇文章介绍了如何使用form表单结合Bootstrap格式将前端数据通过action属性提交到后端的servlet,包括前端表单的创建、数据的一级和二级验证,以及后端servlet的注解和参数获取。
这篇文章介绍了使用AJAX技术将前端页面中表单接收的多个参数快速便捷地传输到后端servlet的方法,并通过示例代码展示了前端JavaScript中的AJAX调用和后端servlet的接收处理。
这篇文章介绍了如何使用form表单结合Bootstrap格式将前端数据通过action属性提交到后端的servlet,包括前端表单的创建、数据的一级和二级验证,以及后端servlet的注解和参数获取。
第一种方式:使用form表单将前端数据提交到servelt(将前端数据提交到servlet)
这篇文章介绍了如何使用form表单结合Bootstrap格式将前端数据通过action属性提交到后端的servlet,包括前端表单的创建、数据的一级和二级验证,以及后端servlet的注解和参数获取。
第一种方式:使用form表单将前端数据提交到servelt(将前端数据提交到servlet)
前端JS正则校验密码之3种实现方式
这篇文章展示了三种使用JavaScript正则表达式来校验密码的方法,密码需要满足包含大写字母、小写字母、数字及特殊字符,并在8到16位之间,同时提供了示例代码和实现效果。
206 1
前端JS正则校验密码之3种实现方式

热门文章

最新文章

  • 1
    jquery实现文字点选验证码
    5
  • 2
    【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    15
  • 3
    【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    39
  • 4
    【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
    2
  • 5
    详解智能编码在前端研发的创新应用
    18
  • 6
    巧用通义灵码,提升前端研发效率
    26
  • 7
    智能编码在前端研发的创新应用
    39
  • 8
    【04】flutter补打包流程的签名过程-APP安卓调试配置-结构化项目目录-完善注册相关页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程
    23
  • 9
    【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
    8
  • 10
    抛弃node和vscode,如何用记事本开发出一个完整的vue前端项目
    4
  • 1
    以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
    29
  • 2
    大前端之前端开发接口测试工具postman的使用方法-简单get接口请求测试的使用方法-简单教学一看就会-以实际例子来说明-优雅草卓伊凡
    60
  • 3
    【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
    26
  • 4
    巧用通义灵码,提升前端研发效率
    93
  • 5
    【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    143
  • 6
    详解智能编码在前端研发的创新应用
    99
  • 7
    智能编码在前端研发的创新应用
    83
  • 8
    【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    37
  • 9
    【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    122
  • 10
    【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
    75
  • AI助理

    你好,我是AI助理

    可以解答问题、推荐解决方案等