【开发】Form Validate 表单验证 扩展应用

目录：

★、文本输入框（easyui-textbox）

★、数字框（easyui-numberbox）

★、时间（easyui-datebox）

★、文本域（easyui-textbox easyui-validatebox）

★、下拉框（easyui-combobox）

特别说明：

验证机制的关闭和启用。可以采用 data-options="novalidate:true" 先关闭元素的验证机制，再在表单提交之际开启验证。这样可以避免用户在第一次看到表单时就全显示红色提示的情形。

示例代码如下：

1、HTML声明：


<input class="easyui-combobox" name="Operator"

required="true" missingmessage="请选择一项"

data-options="novalidate:true, valueField:

或者

<th>

<label>字节数：</label>

</th>

<td>
<input
    type="text"
    name="BytesNum"
    class="easyui-numberbox"
    novalidate="true"
    min="0" max="99000000" precision="0" required="true" missingmessage="请填写 字节数，确保是有效的正整数" />

</td>

2、JS验证：（灰色部分可以去除）


// "分配任务"保存

$btnPreAssignSave_GeneralTasks.click(function () {

$(‘.validatebox-text‘).validatebox(‘enableValidation‘).validatebox(‘validate‘);

var validate = $maintainForm.form(‘enableValidation‘).form(‘validate‘);

if (!validate) {

return false;

}

注意，在验证阶段要先“开启验证”（enableValidation），再“执行验证”（validate）。

参考示例：
http://www.jeasyui.net/plugins/167.html
http://www.jeasyui.net/demo/419.html

★、文本输入框（easyui-textbox）


<input class="easyui-textbox" type="text" name="BookName"

validtype="length[ 0, 150 ]"/>

一般只需限定输入字符的长度即可

★、数字框（easyui-numberbox）


包括整数、小数，以及数字大小范畴的限定。


<tr>

<th>

<label>起始页码：</label>

</th>

<td>

<input class="easyui-numberbox" name="BeginPageNum"

min="0"max="10000000" precision="0"

required="true" missingmessage="请填写 起始页码(0--10000000)" />

</td>

<th>

<label>结束页码：</label>

</th>

<td>

<input class="easyui-numberbox" name="EndPageNum"

min="0"max="10000000" precision="0"

required="true" missingmessage="请填写 结束页码(0--10000000)" />

</td>

</tr>

可以限定数字的大小范围，precision 属性用来限定小数点位数，required确保必填。

自定义验证：在实际业务中，起始页码和结束页码之间可能有这样一个规则“确保结束页码大于（>）起始页码”，这时只需调用BiggnerPageNumThanTarget 自定义扩展，传入所在表单的 id 和相比较元素的 name，以及为第 3 个参数撰写合适的验证消息即可：


<tr>

<th>

<label>起始页码：</label>

</th>

<td>

<input class="easyui-numberbox" name="BeginPageNum"
required="true" missingmessage="请填写 起始页码，确保是有效的正整数"

min="0" max="99000000" precision="0" />

</td>

<th>

<label>结束页码：</label>

</th>

<td>

<input class="easyui-numberbox" name="EndPageNum"
required="true" missingmessage="请填写 结束页码，确保是有效的正整数"

min="0" max="99000000" precision="0"

validtype="BiggnerPageNumThanTarget[‘preAssignForm‘,‘BeginPageNum‘, ‘请确保 结束页码 大于 起始页码‘]" />

</td>

</tr>

以上针对“结束页码”调用了 BiggnerPageNumThanTarget 这一自定义扩展，当用户输入结束页码的数值较小时，将提示用户“请确保 结束页码 大于 起始页码”。

★、时间（easyui-datebox）


验证重点：

1、在页面的脚本中加入验证扩展 SmallerDateThanTarget 和

B

iggnerDateThanTarget

2、在时间控件中加入 validtype 属性

3、数组型参数，第一个参数是表单 id，第二个参数是用来比较的目标控件的 name，务必注意。

（只要是通过表单 id 和其元素 name 就可以定位一个元素的情形，就不要再为单独元素定义 id ，保持表单的简洁，即显式呈现的东西一定要存在确切意义。）


validtype="SmallerDateThanTarget[‘preAssignForm‘,‘EndDate‘]"

详细阐述：

主要是对时间范围的验证。

可以使用扩展函数来限定开始时间和结束时间之间的范围。

往往 起始时间要偏小，而且是小于 结束时间，所以起始时间调用 SmallerDateThanTarget方法；

与此同时，结束时间势必就要大一些，而且是大于 起始时间，所以结束时间调用

B

iggnerDateThanTarget 方法。


<tr>

<th>

<label>开始时间：</label>

</th>

<td>

<input class="easyui-datebox" name="BeginDate"

editable="false" required="true" missingmessage="请填写时间" />

</td>

<th>

<label>结束时间：</label>

</th>

<td>

<input class="easyui-datebox" name="EndDate"

editable="false" required="true" missingmessage="请填写时间"

validtype="BiggnerDateThanTarget[‘preAssignForm‘,‘BeginDate‘,‘请确保 结束时间 大于 开始时间‘]" />

</td>

</tr>

$.extend($.fn.validatebox.defaults.rules, {

BiggnerDateThanTarget: {

validator: function(currentElementValue, param) {

if(!$.isArray(param)) {

window.alert("调用验证器时所传参数必须是数组格式：validtype=\"DateboxCheck[‘preAssignForm‘,‘BeginDate‘, ‘提示信息‘]\" ");

return false;

}

var scopeElementID = param[0];

var targetElementName = param[1];

var targetElement = $("#" + scopeElementID).find(":input[name=‘" + targetElementName + "‘]").val();

return currentElementValue >= targetElement;

},

message: ‘{2}‘

}

});

$.extend($.fn.validatebox.defaults.rules, {

SmallerDateThanTarget: {

validator: function(currentElementValue, param) {

if(!$.isArray(param)) {

window.alert("调用验证器时所传参数必须是数组格式：validtype=\"DateboxCheck[‘preAssignForm‘,‘BeginDate‘, ‘提示信息‘]\" ");

return false;

}

var scopeElementID = param[0];

var targetElementName = param[1];

var targetElement = $("#" + scopeElementID).find(":input[name=‘" + targetElementName + "‘]").val();

return currentElementValue <= targetElement;

},

message: ‘{2}‘

}

});

★、文本域（easyui-textbox easyui-validatebox）


验证重点：

1、注明 validtype="length[0, 400]" 即可。

详细阐述：

文本域不需要使用 <textarea />来表达，在 easyUI 层面上其定义仍然是 textbox，只是 multiline:true 罢了。

同时指定两个类就可以：easyui-textbox 和 easyui-validatebox


<tr>

<th>

<label>备注：</label>

</th>

<td colspan="3">

<input class="easyui-textbox easyui-validatebox"

validtype="length[0, 400]" data-options="multiline:true"

style="width: 520px; height: 60px;" name="Notes" />

</td>

</tr>

★、下拉框（easyui-combobox）


验证重点：

1、在页面的脚本中加入验证扩展 SelectionRequired 。

2、在下拉框元素中加入 validtype 属性，数组参数为其自身 id 和 验证消息 。


validtype="SelectionRequired[‘ddlOperatorPreAssign‘, ‘请选择一项‘]"

详细阐述：

下拉框有时总会包括一个默认项，有时则没有。

它也支持 必填 验证，往往还需要在数据加载成功时默认选中第一项。

比如在初始化时，可以很容易地取得数据，判断起来也方便：


<tr>

<th>

<label>录入员：</label>

</th>

<td colspan="3">

<input class="easyui-combobox" name="Operator" id="ddlOperatorPreAssign"

editable="false"

validtype="SelectionRequired[‘ddlOperatorPreAssign‘, ‘请选择一项‘]"

data-options="novalidate:true, valueField:‘Name‘, textField:‘FullName‘,

url:‘/PMIS/PMIS_EnteringTasks_Assignment/GetUserInCurrentDept‘,

onLoadSuccess: function(data){

if (data) {

$(this).combobox(‘setValue‘,data[0].Name);

}

}

">

</td>

</tr>

$.extend($.fn.validatebox.defaults.rules, {

// 下拉框验证

SelectionRequired: {

validator: function(currentElementText, param) {

// 对于下拉框，验证组件只能默认获取其文本值，需要自己重新提取其 Value。

if(!$.isArray(param)) {

window.alert("调用验证器时所传参数必须是数组格式：validtype=\"SelectionRequired[‘ddlOperatorPreAssign‘, ‘提示信息‘]\" ");

return false;

}

var targetElement = $("#" + param[0]);

var targetElementValue = targetElement.combobox(‘getValue‘);

console.group("开始验证下拉框");

console.info("该验证是确保下拉框的选项值(Value)不是 null 对象、不是 \"0\"、也不是 \"\" ");

console.info("下拉框元素 id = " + param[0]);

console.info("当前选中项 value = " + targetElementValue);

console.info("当前选中项 value 的类型是 " + typeof targetElementValue);

console.info("当前选中项 text = " + currentElementText);

console.info("当前选中项 text 的类型是 " + typeof currentElementText);

if(targetElementValue != null && targetElementValue != "0" && targetElementValue != "") {

console.info("验证成功");

console.groupEnd();

return true;

}

console.warn("验证失败");

console.groupEnd();

},

message: ‘{1}‘

}

});

针对下拉框值得注意的一点，不要使用表单的 clear() 方法，这样会使得下拉框的值成本空白，应使用表单的 reset() 方法。

时间： 2024-10-07 00:59:21

【开发】Form Validate 表单验证 扩展应用的相关文章

基于jQuery的Validate表单验证

表单验证可以说在前端开发工作中是无处不在的~ 有数据,有登录,有表单, 都需要前端验证~~  而我工作中用到最多的就是基于基于jQuery的Validate表单验证~  就向下面这样~ 因为今天有个朋友问我要一个表单的验证,所以我就稍微整理了一下~  基本上有了这个表单验证插件,基本上一些常用的验证都可以搞定了~ 如果搞不定,没关系,我们还可以基于Validate来写一个自己的验证插件, 我把它取名为message_zh.js,我们可以在里面扩展自己需要的验证~~ 既然Validate是基于jQ

【干货】Laravel --Validate (表单验证) 使用实例

前言 : Laravel 提供了多种方法来验证应用输入数据.默认情况下,Laravel 的控制器基类使用ValidatesRequests trait,该trait提供了便利的方法通过各种功能强大的验证规则来验证输入的 HTTP 请求.要掌握 Laravel 强大的验证特性,让我们先看一个完整的验证表单并返回错误信息给用户的例子. 在这之前如果您是首次接触 Laravel 而且并不知道路由如何跳转到指定的控制器 可以查看博主的Restfulapi或者Laravel官网对路由的介绍,在这里就不做介

summernote富文本编辑器配合validate表单验证无法进行表单提交的问题

1.使用summernote富文本编辑器提交图片到服务器 在使用bootstrap中,我们用到了summernote富文本编辑器,使用summernote将图片上传到服务器中,参考我的上篇文章http://www.cnblogs.com/jingmin/p/6592325.html 2.在使用summernote编辑完文本,使用validate进行表单验证出现问题的解决方案 小编在使用summernote富文本编辑器编辑完文章内容,并且上传了图片,对于编写的内容使用了validate进行了表单验

jquery validate表单验证插件-推荐

1 表单验证的准备工作 在开启长篇大论之前,首先将表单验证的效果展示给大家.     1.点击表单项,显示帮助提示 2.鼠标离开表单项时,开始校验元素  3.鼠标离开后的正确.错误提示及鼠标移入时的帮助提醒 对于初学者而言,html表单验证是一项极其琐碎的事情.要做好表单验证,需要准备以下基本要素: 1.html表单结构:包含需要校验的表单元素: 2.js逻辑控制:在需要校验的表单元素上绑定事件,如点击.获取焦点.失去焦点等事件,并设置这些事件对应的执行函数: 3.css样式设置:针对需要校验的

jQuery Validate 表单验证插件----自定义校验结果样式

一.下载依赖包 网盘下载:https://yunpan.cn/cryvgGGAQ3DSW  访问密码 f224 二.引入依赖包 <script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script> <script src="lib/jquery.validate.js" type="text/javascript"

jQuery Validate 表单验证插件----自定义一个验证方法

一.下载依赖包 网盘下载:https://yunpan.cn/cryvgGGAQ3DSW  访问密码 f224 二.引入依赖包 <script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script> <script src="lib/jquery.validate.js" type="text/javascript"

jquery validate 表单验证插件

对于初学者而言,html表单验证是一项极其琐碎的事情.要做好表单验证,需要准备以下基本要素: 1.html表单结构:包含需要校验的表单元素: 2.js逻辑控制:在需要校验的表单元素上绑定事件,如点击.获取焦点.失去焦点等事件,并设置这些事件对应的执行函数: 3.css样式设置:针对需要校验的表单元素,需要设置默认的初始样式,以及触发元素绑定事件后的变化样式. 这3类基本要素中,html表单结构的创建相对简单.表单验证的重点和难点在于如何利用js及时有效地提醒用户有关表单操作的信息.这里我参考了百

PHP开发之旅-表单验证

一.创建表单 <form name = "login" method = "post" action="contact.php?action=login" class="bootstrap-frm"> <h1>联系我们</h1> <label> <span>微信* :</span> <input id="wechat" type=

validate表单验证插件

1.引入validate.js包 <script src="xx/xx/jquery.validate.min.js"></script> 2.表单验证 //表单验证 $("#formSubmit").validate({ debug:true, //调试模式,取消submit默认的提交功能 rules:{ name:{ required:true, checkEmpty:true }, email:{ required:true, emai