Jquery validform
Posted 查克拉的觉醒
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Jquery validform相关的知识，希望对你有一定的参考价值。
绑定了ignore="ignore"的表单元素，在有输入时， 会验证所填数据是否符合datatype所指定数据类型，
<!--引入css --> <link rel="stylesheet" href="<%=request.getContextPath()%>/js/validform/css/style.css" type="text/css" media="all" /> <!-- 引入jquery --> <script type="text/javascript" src="<%=request.getContextPath()%>/js/jquery/jquery-1.7.js"></script> <!--引入validform --> <script type="text/javascript" src="<%=request.getContextPath()%>/js/validform/validform-js/Validform_v5.3.2(1)/Validform_v5.3.2_ncr_min.js"></script>
//初始化： $(function(){ var demo=$(".demoform").Validform({ }); })
*6-16：检测是否为6到16位任意字符；
n：数字类型；
n6-16：6到16位数字；
s：字符串类型；
s6-18：6到18位字符串；
p：验证是否为邮政编码；
m：手机号码格式；
e：email格式；
url：验证字符串是否为网址。
如：nullmsg="请填写用户名！"
输入内容不能通过验证时的提示信息，默认提示"请输入正确信息！"。
如：errormsg="用户名必须是2到4位中文字符！"
recheck（二次验证，保证输入的一致性）
2=> 侧边提示(会在当前元素的父级的next对象的子级查找显示提示信息的对象，表单以ajax提交时会弹出自定义提示框显示表单提交状态)；
3=> 侧边提示(会在当前元素的siblings（相邻）对象中查找显示提示信息的对象，表单以ajax提交时会弹出自定义提示框显示表单提交状态)；
4=> 侧边提示(会在当前元素的父级的next对象下查找显示提示信息的对象，表单以ajax提交时不显示表单的提交状态)；
如<input type="text" value="默认提示文字" tip="默认提示文字" altercss="任意写" />
它需要和tip属性配合使用，altercss指定的样式名，会在文本框获得焦点时被删除，没有输入内容而失去焦点时重新加上。
ajaxurl：（进行实时验证）
使用 ajaxurl 时首先会对我们定义的datatype进行验证，只有验证通过后才会请求方法数据。
前台到后台：
前台：
在需验证的文本中绑定 ajaxurl 属性 后跟上路径，当我们失去光标时会直接请求我们定义的方法
后台：
ajaxurl指定的方法可以接收到Post方式传过来的两个值，后台接收分别是param和name（后台定义的属性驱动），param是该元素的值.
name是该元素的name属性值。（可忽略）
后台往前台：
后台：
使用ajaxurl后台往前台传值须是含有status（状态） info（提示信息）值的json数据！
status的值 成功为小写字母 "y" 失败为小写字母 "n" （不然样式会出错）
前台会自动识别
在表单验证通过，提交表单数据之前执行的函数
函数return false的话表单将不会提交;
$(function () {
$("#formID").Validform({ //验证 btnSubmit: "#submitBtn", tiptype: 2, tipSweep: true, beforeSubmit: function () { saveData(); return false; } });
layui.use(\'upload\', function () { var $ = layui.jquery , upload = layui.upload;
upload.render({ elem: \'#test1\' , url: \'/WebAccount/UploadAnKangMa/\' , multiple: true , accept: \'file\' //普通文件 , exts: \'jpg|jpeg|gif|png|bmp\' , size: 1024 * 1 , before: function (obj) { //预读本地文件示例，不支持ie8 obj.preview(function (index, file, result) { $(\'#demo1\').append(\'<img src="\' + result + \'" alt="\' + file.name + \'" class="layui-upload-img">\') }); } , done: function (res) { if (res.code != 200) { layer.alert(res.msg) return false; } $(\'#hidPic\').val(res.fileName); var demoText = $(\'#demoText1\'); demoText.html(\'<span style="color: #FF5722; margin-left:10px;">上传成功</span>\'); } }); });
}); function saveData() { var index = layer.load(0); $.ajax({ type: "Post", url: "/WebAccount/Participants/", data: $(\'#formID\').serialize(), dataType: "json", success: function (data) { layer.close(index); if (data.Ret == 0) { layer.alert(data.Msg, { title: false, shift: 4 }); } else { layer.alert(data.Msg, { title: false, shift: 4 }, function () { parent.location.reload(); }); } } }); }
以上是关于Jquery validform的主要内容，如果未能解决你的问题，请参考以下文章