FormValidation的使用（简单验证）

最新推荐文章于 2024-07-14 14:33:00 发布
最新推荐文章于 2024-07-14 14:33:00 发布
阅读量6.2k 收藏
点赞数
分类专栏： HTML+CSS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wind428/article/details/81126255
版权

- 官方地址

https://formvalidation.io/

貌似要钱，不过在天朝。。。

- 使用方法：引入 JS CSS 本地化文件JS

<html>
<head>
    <link rel="stylesheet" href="/vendors/formvalidation/dist/css/formValidation.min.css">
</head>
<body>
    <!-- 你的表单写在这里 -->
    ...
<script src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.35.3/es6-shim.min.js"></script>    
<script src="/vendors/formvalidation/dist/js/FormValidation.min.js"></script>
</body>
</html>

 js验证表单

$('#formId').formValidation({
    framework: 'bootstrap',
    icon: {
        valid: 'glyphicon glyphicon-ok',
        invalid: 'glyphicon glyphicon-remove',
        validating: 'glyphicon glyphicon-refresh'
    },
    fields: {
        fieldName: {
            validators: {
                notEmpty: {
                    message: '请输入XXXX'
                }
            }
        },
        fieldName: {
            validators: {
                notEmpty: {
                    message: '这里是验证失败的提示信息'
                }
            }
        }
    }
}).on('success.form.fv', function (e) {
    // Prevent form submission 阻止默认的submit方法，用ajax提交
    e.preventDefault();
    // Some instances you can use are
    var $form = $(e.target),        // The form instance
    fv = $(e.target).data('formValidation'); // FormValidation instance
    // Do whatever you want here ...
    $.ajax({
        url: '这里是你要提交的URL',
        method: 'POST',
        dataType: 'json',
        data: $form.serialize(),
        error: function (jqXHR, textStatus, e) {
            alertWarn('服务器正忙');
        },
        success: function (data) {
            if (data.result_code == 0) {
                alertSuccess('保存成功');
                $('#myModal').modal('hide');
                $('#table-all').bootstrapTable('refresh', {
                    silent: true
                });
            }
        }
    });
});

 - 手动清除验证

$('#formId').data('formValidation').resetForm();

- 待补充

 正则表达式验证

 远程验证

MTU_X79
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 6
    评论
专栏目录
FormValid好东西js验证类
02-21
FormValid好东西js验证类，关于自动验证的东东！
jQuery表单验证插件formValidation实现个性化错误提示(超实用)
Lucky.
08-02 1071
<br /><br />上期在[jQuery插件Validate验证表单实现javascript表单验证功能]和[jQuery插件Validation验证表单实现javascript表单智能验证功能]中分别介绍了两个实现表单验证的jQuery插件，这里介绍另外一个表单验证插件formValidation，这个插件与前面两个插件的最大区别在于它实现了个性化的错误提示信息，显示在表单元素右上角类似于提示条，其效果图如下：<br /><br />使用说明<br />需要使用jQuery库文件和formValida
WHAT - Form 表单组件系列（二）- 最原始的表单验证机制 form validation
最新发布
weixin_58540586的博客
07-14 812
组件库中经常用到form表单，其中表单验证是很重要的一个环节。那最原始的html表单验证机制是怎么样的？以及我们可以利用哪些特性来实现自定义表单验证？
使用FormValidation进行表单验证
热门推荐
pcbhyy的博客
11-03 1万+
一、概述 1.最好的jquery表单验证插件 2.最新下载：（收费,我的附件中有之前的版本，也能用）     http://formvalidation.io/     http://formvalidation.io/download/ 3.官网案例：     http://formvalidation.io/examples/ 4.指南：     http://formvalidation.i...
FormValidation.js
11-18
丰富的校验规则，样式，支持动态添加元素的校验方式。
Bootstrap 表单验证formValidation 实现远程验证功能
08-30
在本篇文章中，我们将深入探讨如何利用formValidation插件来实现Bootstrap表单的远程验证功能。 首先，formValidation是一个强大的JavaScript库，专为表单验证设计。它提供了丰富的验证规则和灵活的配置选项，可以...
FormValidation:最简单JavaScript表单验证
05-13
简单实现jQuery表单验证插件。 只需将HTML字段添加到其中，即可向您的输入字段添加验证。 一个例子可能看起来像这样： < input type =" text " fv-email =" This must be a valid email. " name =" email " ...
BootStrap表单验证 FormValidation 调整反馈图标位置的实例代码
08-30
BootStrap表单验证 FormValidation 调整反馈图标位置的实例代码 BootStrap表单验证 FormValidation 是一款功能强大且流行的表单验证插件，它可以帮助开发者快速创建具有良好用户体验的表单验证功能。然而，在某些...
Jquery前端表单验证插件formvalidation源码及示例
08-28
**jQuery FormValidation插件**是前端开发中一个广泛使用的工具，专门用于实现高效且用户友好的表单验证。这个插件基于流行的JavaScript库jQuery构建，它简化了在Web应用程序中实施复杂的验证规则的过程。在标题提到...
form-validation.js:最可定制JavaScript验证框架
04-14
form-validation.js 现场例子 vue @ 2 + element-ui 特征 直观的API。 :bullseye: 异步规则支持。 嵌套对象/ Aray支持。 数组操作（推，弹出，移位，不移位，拼接，反向）支持。 零依赖关系，仅本机Javascript。 概述 const form = { account : '' , } const schema = { account : { $params : { languageCode : 'en' , minLength : 6 , } , $normalizer ( { value , key , parent , path , root , params } ) { return typeof value === 'string' ? value . trim (
mobile-form-validate:mobile-form-validate 移动端表单验证，适合移动端的表单验证(原生JS，无依赖）
05-10
mobile-form-validate mobile-form-validate 移动端表单验证，适合移动端的表单验证(原生JS，无依赖） 简介 适合移动端的表单验证插件，无任何依赖 截图 示例 依赖 无依赖 使用方法 在页面中引入所需的文件 [removed][removed] var ooo = new Mvalidate('myForm') ooo.add({ name:'user', rules:['required',/^[\u2E80-\u9FFF]+$/,'maxLength(4)'], message:['用户名必须填写','用户名必须是中文','用户名最长不能超过4位'], callback:function(el, errorEl){ }
FormValidation完整源码和演示
04-10
FormValidation,非常强大实用的难框架，完美支持html的data属性，能够自定义验证器。本资料系完整源码和演示脚本。
表单验证之validform.js使用方法
dazi6112的博客
08-24 292
一.validform有什么用？ 网页上有大量的input需要你进行验证的时候，如果是弹窗的话，需要不停地判断，如果为空，弹窗。如果不是数字，弹窗。 所以要将这么多验证交给一个js去验证。 二.我现在知道的全页面js验证文件 1.jquery.validat.js 官网：http://jqueryvalidation.org/ 这东西就是放在我们的vs中的那个验证用j...
JS formvalidator 表单验证试用
周辉辉的专栏
10-28 2896
最近在做表单的时候头疼过表单验证的问题; 在做v9二次开发的时候就发现它本事就有一个表单验证功能,  今天仔细看看, 原来用的是formvalidator, 功能强大 下面是自己尝试做的DEMO, 比较简单, 手册链接 http://www.yhuan.com/doc/index.html JS表单验证 $(function(){ $.formValidato
jQuery表单校验插件jquery.form-validator.js的使用
qq_37132598的博客
03-27 1771
原文章地址https://www.npmjs.com/package/jquery-form-validator 在使用jquery.form-validator.js插件时需要引入以下两个js文件 <scriptsrc="js/jquery.min.js"></script> <scriptsrc="js/form-validator/jquery.f...
bootstrap 5 表单验证
weixin_43727933的博客
07-25 4141
zpjbvalidator改编自jbvalidator是一个全新的基于jQuery的表单验证插件，它是为最新的Bootstrap5框架创建的，理论上支持Bootstrap3，Bootstrap4支持客户端和服务器端验证。在原有功能基础上，修改了其核心代码。为了区别与源代码，将文件名更改为zpjbvalidator.js。.........
formValidation手动ajax提交
寂寥人生
06-29 220
基本的示例代码 $("#artAdd-from").formValidation({ //配置语言 locale: "zh_CN", //验证字段 fields: { title: { validators: { notEmpty: true,
通用表单验证formvalidator 后端验证
hudeyong926的专栏
07-03 1955
在使用formvalidator4.1.3 插件时 发现正常情况调用时没有问题的,但是我们的项目中需要把css 、js 之类的静态资源用单独的域名加载。那么问题就来了在 该插件中 有一段这样的程序 //读取主题对应的脚本 var scriptSrcArray = fv_scriptSrc.split('/'); var jsName = scriptSrcArray[scriptSrcArray.length - 1]; var themedir = fv_scriptSrc.replace(jsN..
el-form validation
08-30
对于`el-form`的验证，您可以使用以下步骤： 1. 首先，在`el-form`组件中定义需要验证的表单字段。您可以使用`rules`属性来指定验证规则。例如： ```html <el-form :model="form" :rules="rules"> <el-form-item label="用户名" prop="username"> <el-input v-model="form.username"></el-input> </el-form-item> <el-form-item label="密码" prop="password"> <el-input type="password" v-model="form.password"></el-input> </el-form-item> </el-form> ``` 2. 在Vue组件的`data`选项中定义表单数据和验证规则。例如： ```javascript data() { return { form: { username: '', password: '' }, rules: { username: [ { required: true, message: '请输入用户名', trigger: 'blur' } ], password: [ { required: true, message: '请输入密码', trigger: 'blur' }, { min: 6, max: 12, message: '密码长度在 6 到 12 个字符', trigger: 'blur' } ] } }; } ``` 3. 最后，您可以使用`this.$refs.form.validate()`方法触发表单验证，并根据返回结果进行处理。例如： ```javascript methods: { submitForm() { this.$refs.form.validate(valid => { if (valid) { // 验证通过，进行表单提交操作 } else { // 验证失败，进行错误处理 } }); } } ``` 这是一个简单的示例，您可以根据实际需求自定义验证规则和错误处理逻辑。更详细的说明可以在Element UI的文档中找＊＊＊-yan-zheng
评论 6
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值