valiform 的使用

于 2020-06-28 17:31:25 发布
阅读量566 收藏 1
点赞数
分类专栏： js 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43035350/article/details/107004184
版权

下载地址： http://validform.club/download.html

1.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
<link rel="stylesheet" href="Validform_v5.3.2/Validform_v5.3.2/demo/css/style.css" type="text/css"  />
</head>
<body> 
       
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="Validform_v5.3.2/Validform_v5.3.2_min.js"></script>

<form class="demoform" action="2.php">
<div style="margin: 0 auto; width:500px;height:500px;border:5px solid red;">

<div style="margin-top:50px">                    <!-- ignore="ignore" 填写啦就验证，没填就不验证 -->       
	<label>
	账号														
	<input type="text" value="" name="name" ajaxurl="1.php" ignore="ignore" datatype="email|mobile" sucmsg="账号验证成功" nullmsg="账号不能为空" errormsg="账号至少5个字符,最多16个字符！" />
	<span class="Validform_checktip"></span>	 <!-- sucmsg  验证成功提示信息  -->       
	<label/> 								 <!--  nullmsg 为空提示信息 -->      		
<div/>										 <!--  errormsg 验证错误提示信息 -->      					

<div style="margin-top:50px">
	<label>
	电话
	<input type="tel" value="" name="tel" datatype="tel" nullmsg="电话不能为空" errormsg="电话错误！" />
	<span class="Validform_checktip"></span>
	<label/>
<div/>

<div style="margin-top:50px">
	<label>
	密码
	<input type="text" value="" name="password" datatype="s5-16" nullmsg="密码不能为空" errormsg="密码至少5个字符,最多16个字符！" />
	<span class="Validform_checktip"></span>
	<label/>
<div/>

<div style="margin-top:50px">
	<label>
	确认密码                <!-- recheck="password"  和password 密码输入框对比   -->       
	<input type="text" value="" name="qr_pwd" recheck="password" datatype="s5-16" nullmsg="确认密码不能为空" errormsg="两次密码不一致"/>
	<span class="Validform_checktip"></span>   <!--  class="Validform_checktip"  用来显示错误信息的-->       
	<label/>
<div/>


<div style="margin-top:50px">
	<label>
	邮箱
	<input type="text" value="" name="email" datatype="email" nullmsg="邮箱不能为空" errormsg="邮箱不合法！" />
	<span class="Validform_checktip"></span>
	<label/>
<div/>

<div style="margin-top:50px">
	<label>
	网址
	<input type="text" value="" name="url" datatype="url" nullmsg="网址不能为空" errormsg="网址不合法！" />
	<span class="Validform_checktip"></span>
	<label/>
<div/>



<label>
<input type="submit" value="提交"/>
<label/>
<div>

</form>
 
 <script>
 
	//   * 所有字符  s 字符串   n 整型  e 邮箱    m 手机号验证  url 网址

$(".demoform").Validform({
	tiptype:4, // 1 弹窗 
	showAllError:true,//当提交表单时，展示所有错误·
	ajaxPost:true,  // 异步表单数据提交
	datatype:{
		mobile:/^1[3|5|7|8]\d{9}$/, //自定义正则
		email:/^[_a-z0-9-]+(\.[_a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,})$/,
		tel:function(data){
		var reg = /^1[3|5|7|8]\d{9}$/;
		if(reg.test(data)){
			//$.post(); 向数据库发送请求，查看手机号是否被占用
			return true;
		}else{
			return false;
		}
		}
	
	},
	
	//异步请求的回调函数，将返回的数据放在C中
	callback:function(c){
			console.log(c);
		}
	

});

 </script>
 
</body>
</html>

1.php

<?php
//规定返回json数据
// info  提示信息
// status ：  Y  验证通过   n 验证不过通

$a = [ 'info'=>'手机号已被占用','status'=>'n','data'=>['key'=>$_POST['name'],'value'=>$_POST['param']]];

echo json_encode($a);
?>

2.php

<?php
$a = ['info'=>'ok','status'=>'y'];

 echo json_encode( $_POST);
?>

 

给我一瓶冰阔洛
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
基于Bootstrap+jQuery.validate Form表单验证实践
code小王子
06-02 9万+
基于Bootstrap+jquery.validate form表单验证实践
validfrom 表单验证的使用心得
qq_35772936的博客
06-14 1082
首先引入 validform.js文件 html代码       &lt;form id="form"&gt;        &lt;input id="name" placeholder="请输入真实姓名" type="text" datatype="*" errormsg="请填写用户名"&gt;        &lt;input
valiform
iteye_10630的博客
12-01 126
datatype内置基本的datatype类型有： * | *6-16 | n | n6-16 | s | s6-18 | p | m | e | url*：检测是否有输入，可以输入任何字符，不留空即可通过验证；*6-16：检测是否为6到16位任意字符；n：数字类型；n6-16：6到16位数字；s：字符串类型；s6-18：6到18位字符串；p：验证是否为邮政编码；m：手机号码格式；e：email...
Validform基础及用法
热门推荐
河马先生
10-22 1万+
1.简介： Validform的核心思想为将所有的验证条件以及验证的提示信息绑定在每个表单元素上，让验证该代码时对表单各个元素的值是否跟绑定的验证条件相符，这样就可以随便的添加或者去掉任意一表单元素而不必去修改验证代码，从而仅适用一行代码去完成整站的表单验证。 2.使用方法 2.1.引入css(官网文档中下载css)http://validform.rjboy.cn/document.htm...
validateFrom用法
xbfengyu的专栏
05-10 2395
转载：http://blog.csdn.net/yaerfeng/article/details/8293587 [html] view plain copy  print? %@ page language="java" pageEncoding="UTF-8" contentType="text/html;charset=UTF-8"%>   %@ incl
学生管理系统C#写的
10-06
if(this.valiform.Stu_Male.Checked == false && this.valiform.Stu_Female.Checked == false) { MessageBox.Show("请选择性别！@_@"); return false; } if(this.valiform.Stu_Idcard.Text == ...
Element UI 自定义正则表达式验证方法
12-29
如下所示： ...<el model=valiForm rules=rules ref=valiForm label-width=100px class=demo-valiForm> 名称： label-width=formLabelWidth prop='name'> <el v-model=valiForm.name> //add('vali
Validform使用入门
chen_bingbing的专栏
04-19 2192
1、引入css 请查看下载文件中的style.css，把里面Validform必须部分复制到你的css中（文件里这个注释 "/*==========以下部分是Validform必须的===========*/" 之后的部分是必须的）。之前发现有部分网友把整个style.css都引用在了页面里，然后发现样式冲突了。 2、引入js （jquery 1.4.3 以上版本都可以）
关于验证表单插件Validform的用法
IT羊的博客
10-07 8004
先说明下，这个是菜鸟教程。主要是写给自己和像我一样的菜鸟看的，高手勿喷！ Validform是一个很好的表单验证插件，作者写了很多方法，我们只要直接调用就好了。 使用方法 1、写入此插件必须的css，以及他的图片，在插件包里面有/*==========以下部分是Validform必须的===========*/ .Validform_checktip{ margin-left:8px
validateformdata用于验证表单数据的数据结构
08-10
validate-formdata 用于验证表单数据的数据结构
validform表单验证
xuesibianxing的博客
03-07 3021
validform插件主要把所有的验证条件和验证提示信息绑定到每个表单元素，这种形式非常方便，下面写法更加智能得到label内容来提示 【1】引入js脚本： &lt;link href="${ctx}/assets/css/validform.css" rel="stylesheet" type="text/css" /&gt; &lt;script src="${ctx}/assets/js/v...
不是一般地好用的jquery表单验证插件-Validform
十年砍柴的博客
02-24 5803
之前博主推荐过jQuery Validate，因为之前也在用，但是配置稍微显得有些麻烦，直到最近的这个项目用到了validform，才让我大开眼界，整个界面突然感觉太友好了，先来几张效果图吧。 整个过程引用的css及js非常少。 css如下： 1 2 3 4 5 6 7 8 9 10
Validform实时表单验证插件实例使用
任聪聪的博客
10-17 7489
文档日期：2016-10-17 适用范围：所有类型网站表单验证 插件版本：v5.3.2 插件地址：http://validform.rjboy.cn/Validform/v5.3.2/Validform_v5.3.2_min.js jquery地址：http://download.csdn.net/detail/bennygreat/3861587 html中的代码实例<!d
解决使用valiform和同时上传多张图片问题
我是个少年的博客
05-31 1737
平台：
form表单验证validform
u013796473的博客
03-16 1062
1，引入style.css 2,引入js src="${request.contextPath}/js/bootstrap.min.js"> src="${request.contextPath}/js/Validform_v5.3.2_min.js"> 3,在input框中添加属性datatype,errormsg class="col-sm-5"> type="text
Validform基础及简单用法
weixin_42125810的博客
03-05 2270
先看这个==》https://blog.csdn.net/qq_31873539/article/details/83268049 凡要验证格式的元素均需绑定datatype属性，datatype可选值内置有10类，用来指定不同的验证格式。 如果还不能满足您的验证需求，可以传入自定义datatype，自定义datatype是一个非常强大的功能，通过它可以满足你的任何需求。 可以绑定的附加属...
liunx论坛搭建
weixin_44802155的博客
04-14 4143
Top NTD LINUX DAY02 案例1：LAMP安装及启用 案例2：测试LAMP网站平台 案例3：Web网站基础配置 案例4：配置虚拟主机 案例5：部署论坛代码 案例6：安装Discuz!论坛 案例7：使用Discuz!论坛 1 案例1：LAMP安装及启用 1.1 问题 本例要求基于Linux主机快速构建LAMP动态网站平台，并启用相关系统服务，完成下列操作： 1）安装LAMP平台各组件...
ValidformJS校验
qq1179721786的博客
05-16 360
js (function($) { $.fn.formVaild = function() { var _this = $(this); _this.find("[notEmpty]").each(function() { var _ths = $(this); var val = _ths.val(); var ...
ref="valiForm" :rules="rules" v-model="valiFormData详解及含义
最新发布
05-10
- `ref="valiForm"`：将该表单组件命名为`valiForm`，以便在Vue.js的方法中可以通过引用名来获取表单组件对象。 - `:rules="rules"`：使用了Vue.js中的属性绑定，将表单验证规则对象`rules`绑定到该表单组件的`rules...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值