validate实现表单校验

最新推荐文章于 2024-04-15 14:11:06 发布
最新推荐文章于 2024-04-15 14:11:06 发布
阅读量2.9k 收藏 1
点赞数
分类专栏： JQ
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/My_____Dream/article/details/79249763
版权

validate实现表单校验

一、步骤分析

1、设计好表单页面

2、导入JQ.js，再导入jq.validate.js

3、加载页面后，通过name属性获取表单

4、编写rules（注意结尾逗号的使用）

5、补充提示信息格式（方式一messages:{name属性值：“提示信息”}。方式二导入国际版中文messages_zh.js）

 

二、代码实现

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>validate表单校验</title>
<script   type="text/jscript" src="js/jquery-1.11.0.js"></script>
<script   type="text/jscript" src="js/jquery.validate.js"></script>
<script type="text/javascript">
$(function(){
                $("#form1").validate({
                rules:{
                //设置用户名不为空
                username:"required",
                //设置账号长度不

最低0.47元/天 解锁文章
My_____Dream
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Form表单验证
weixin_30664539的博客
08-23 5462
Form表单提交前js验证 1. Onclick() 2. Onsubmit() Button标签input (属性submit button )标签 Input type=button 定义按钮，没有任何行为。多数情况下，用于通过javascript启动脚本 Input type=submit定义提交按钮，提交按钮会把表单数据发送到服务器 1. oncli...
jQuery Validate 表单校验插件.zip
04-11
jQuery Validate 插件依赖 jQuery 库，使用前需要先导入 jQuery的 js 文件，再导入 jquery.validate.js 插件，可以再导入中文提示信息文件 messages_zh.js
validate表单验证
qq_31935559的博客
04-26 2048
引用： <script src="${ctx}/static/vendor/jquery-validation/jquery-validation.min.js"></script> <script src="${ctx}/static/js/jquery.validation_zh_CN.js"></script> 效果图： js: ...
基于Vant组件库的表单校验
04-17 3517
TS+Vue3.x+Vant
Form表单验证之---Validate
最新发布
qq_57613837的博客
04-15 415
如果多个按钮的校验方式不同，比如发送短信码+登录页面，短信码只要校验 手机号字段，登录要校验手机号和验证码两个字段怎么办？在data中定义校验规则，校验规则要针对每一个上节定义好formitem进行校验，可以有required 也可以有正则表达式。<el-form-item label="表单项" prop="menuName">定义form名称为myform，校验规则用myrules 先记住这两个名字。使用:rules="myrules"指定校验规则。使用ref="myform"来指定表单名。
Vue vant框架form表单 validate方法
weixin_60700622的博客
11-10 1万+
通过ref可以获取到form实例并调用实例方法 在<van-form></van-form> 上面添加 ref="dataform" 可以获取到表单里的所有元素 因为我要进行表单验证所以在medthod中通过 然后在我要验证的那个<van-field></van-field> 上面添加name="xxx" this.$ref,dataform.validate("xxx")。 validate验证表单，支持传入name来验证单个或部分表单项 ...
jquery的validate表单校验插件
06-19
这个前端的jquery的表单校验插件，使用起来很方便，可以大大的减少我们开发者对于表单校验的工作。而且支持自定义验证规则，功能强大。
基于BootStrap与jQuery.validate实现表单提交校验功能
10-20
学习前台后台最开始接触的业务都是用户注册和登录,下面通过本文给大家介绍BootStrap与jQuery.validate实现表单提交校验功能，感兴趣的朋友一起学习吧
bootstrap使用validate实现简单校验功能
09-01
在Bootstrap中，为了实现表单的验证功能，通常会结合jQuery库以及jQuery Validate插件来使用。jQuery Validate是一个强大的验证插件，它提供了丰富的验证规则和自定义验证方法，能够帮助开发者轻松实现表单验证。 ...
vue中vee validate表单校验的几种基本使用
08-27
Vue 中 Vee Validate 表单校验的几种基本使用 ...Vee Validate 提供了多种方式来实现表单校验，包括必填和长度校验、异步请求服务的校验、延迟校验等。这些方式可以满足不同的开发需求，使得开发更加灵活和便捷。
Validate表单验证
我的博客
05-25 344
Validate 是 jQuery 的一个子插件， 该插件为表单提供了强大的验证功能，让客户端表单验证变得更简单，同时提供了大量的定制选项，满足用户的各种验证需求。// 全局修改Validate错误提示信息，仅当前页有效。// 修改年龄错误的提示信息，优先级高于全局错误提示。// rmote用法，用户名调用自定义接口校验。"年龄应为0~100的数字""年龄age必填字段哦~"//年龄应为0~100。//年龄应为0~100。"请填写正确的手机号码""这个为必填字段哦~""自定义校验错误~"
「jQuery系列」jQuery 校验表单（Validate）
日常笔记/总结/系列知识梳理
03-14 1498
jQuery Validate的一些常见使用场景： 网站前端表单验证：无论是用户注册、登录、提交订单还是其他类型的表单输入，使用jQuery Validate可以确保用户输入的数据符合预设的规则，如邮箱格式、密码强度、必填项等。这有助于防止因用户输入错误而导致的数据错误或系统异常。 动态校验场景：在前端设计中，实时、动态的信息校验提醒能够提供良好的用户体验。jQuery Validate提供了强大的动态校验功能，能够实时检查用户的输入，并在不满足规则时即时给出提示，帮助用户快速修正错误。
利用validate进行表单校验
u013469562的博客
10-23 2526
利用validate进行表单校验
ElementUI表单校验
qq_57420582的博客
09-14 3509
ElementUI表单校验
jQuery.validate验证时用的是Form输入表单的name属性
MiuWing的博客
07-19 926
例如： [html] view plain copy >   html>   head>   title>testtitle>   meta http-equiv="Content-Type" content="text/html;charset=utf-8" />   meta http-equiv="Cache-Control" conte
element-ui表单验证例子：validateField验证部分表单
热门推荐
frank_fong的博客
08-05 3万+
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv...
form表单验证
m0_62460586的博客
12-11 1467
form表单校验 //▇当有很多表单校验时，最好在mixins里新建一个js文件专门放置校验规则与方法 校验规则： // ▇ 是否必须 required: true // ▇ 校验type类型 type：'email' // string // number // boolean // email // url // date // integer(必须是数字和整数类型) // hex(十六进制) // method // regexp // float:(必须是数字类型和浮点数) // array:必
vue的validate表单校验
05-12
Vue.js 提供了一个非常方便的表单校验方式，即使用 `v-validate` 指令。这个指令可以应用于表单元素上，用于指定该元素需要进行校验。使用 `v-validate` 指令需要先安装 `vee-validate` 库。 下面是一个简单的例子，展示了如何使用 `v-validate` 校验一个表单： ```html <template> <form @submit.prevent="submitForm"> <div> <label for="name">姓名：</label> <input id="name" name="name" type="text" v-validate="'required'"> <span v-show="errors.has('name')">{{ errors.first('name') }}</span> </div> <div> <label for="email">邮箱：</label> <input id="email" name="email" type="email" v-validate="'required|email'"> <span v-show="errors.has('email')">{{ errors.first('email') }}</span> </div> <div> <label for="password">密码：</label> <input id="password" name="password" type="password" v-validate="'required|min:6'"> <span v-show="errors.has('password')">{{ errors.first('password') }}</span> </div> <button type="submit">提交</button> </form> </template> <script> import { ValidationObserver, ValidationProvider, extend } from 'vee-validate'; import { required, email, min } from 'vee-validate/dist/rules'; extend('email', email); extend('min', min); export default { components: { ValidationObserver, ValidationProvider, }, methods: { submitForm() { this.$refs.observer.validate().then(success => { if (success) { // 校验通过，提交表单 console.log('submit form'); } }); }, }, }; </script> ``` 这个例子中，我们使用了 `v-validate` 指令指定了三个需要校验的表单元素，并且指定了它们需要满足的校验规则。在每个表单元素的下方，我们使用了 `v-show` 指令来控制错误提示信息的显示。 在 JavaScript 部分，我们定义了一个 `submitForm` 方法来提交表单。在这个方法中，我们使用了 `this.$refs.observer.validate()` 方法来触发表单校验。如果校验通过，就可以执行表单提交的操作了。 以上是一个简单的 Vue.js 表单校验的例子，具体的校验规则和用法可以参考 `vee-validate` 的官方文档。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值