jqueryEasyui_验证

最新推荐文章于 2022-03-17 11:55:39 发布

xclsky1120

最新推荐文章于 2022-03-17 11:55:39 发布

阅读量379

点赞数

本文链接：https://blog.csdn.net/yumolan4325/article/details/79258703

版权

引入jqueryeasyui：
<link rel="stylesheet" type="text/css"
href="./js/jquery-easyui-1.4.3/themes/default/easyui.css">
<link rel="stylesheet" type="text/css"
href="./js/jquery-easyui-1.4.3/themes/icon.css">
<script type="text/javascript"
src="./js/jquery-easyui-1.4.3/jquery.min.js"></script>
<script type="text/javascript"
src="./js/jquery-easyui-1.4.3/jquery.easyui.min.js"></script>
<script type="text/javascript"
src="./js/jquery-easyui-1.4.3/locale/easyui-lang-zh_CN.js"></script>

基本输入框：
<input class="easyui-textbox" type="text" name="shipCompanyNew" value="">

由此开始记录jquery的easyui验证
如基本输入框-长度控制:
<input class="easyui-textbox" type="text" style="width:200px" data-options="validType:'length[0,10]'" name="" >
示例：
<form id="form1" method="post">
<input class="easyui-textbox" type="text" style="width:200px" data-options="validType:'length[0,10]'" name="" >
<input type="button" id="return" name="return" value="back"/>
</form>

js函数：
<script type="text/javascript">
$("#return").click(function(){
var isValid = $("#form1").form('validate');
if(isValid){
//表单验证成功了。
}else
});
</script>

说明：
基本输入框easyui-textbox继承自validatebox 。
easyui的一些控制属性是放在data-options属性中的，例如validType:'length[0,10]'表示控制长度。
validType:'length[0,10]'用于控制长度控制的验证。validType属性支持string和array。
例如此示例中的length[0,10]为string。表示长度最小是0.最大长度为10。如果超过则验证不通过。
validType属性支持array的用法：validType:['email','length[0,20]']
var isValid = $("#form1").form('validate');用于判断表单是否验证成功。如果返回true则表示表单都验证成功了。如果返回false则有验证不通过的
$("#form1").form('validate')理解：是调用jquery的form函数参数值是'validate'。这是会调用form的validate函数进行判断并返回验证结果。

如基本输入框-必填项:
<input class="easyui-textbox" required style="width:250px;" type="text" name="" value="" >
示例：
<body>
<form id="form1" method="post">
<input class="easyui-textbox" required style="width:250px;" type="text" name="" value="" >
<br/>
<input type="button" id="return" name="return" value="back"/>
</form>

</body>
<script type="text/javascript">
$("#return").click(function(){
var isValid = $("#form1").form('validate');
if(isValid){
//表单验证成功了。
}
});
</script>
说明：
required表示必填项。不能为空的验证。

基本输入框-必填项-长度控制
<input class="easyui-textbox" required style="width:250px;" data-options="validType:'length[0,10]'" type="text" name="" value="" >
示例：
<body>
<form id="form1" method="post">
<input class="easyui-textbox" required style="width:250px;" data-options="validType:'length[0,10]'" type="text" name="" value="" >
<br/>
<input type="button" id="return" name="return" value="back"/>
</form>

</body>
<script type="text/javascript">
$("#return").click(function(){
var isValid = $("#form1").form('validate');
if(isValid){
//表单验证成功了。
}
});
</script>
说明：
是整合必填项和长度控制。

数字输入框:
<input class="easyui-numberbox" type="text" name="" value="">
示例：
<body>
<form id="form1" method="post">
<input class="easyui-numberbox" type="text" name="" value="">
<br/>
<input type="button" id="return" name="return" value="back"/>
</form>

</body>
<script type="text/javascript">
$("#return").click(function(){
var isValid = $("#form1").form('validate');
if(isValid){
//表单验证成功了。
}
});
</script>
说明：
数字输入框使用easyui-numberbox来标识出来。

数字输入框-最小值~最大值
<input class="easyui-numberbox" type="text" data-options="min:0,max:20,precision:0" name="" value="">
示例：
<body>
<form id="form1" method="post">
<input class="easyui-numberbox" type="text" data-options="min:0,max:20,precision:0" name="" value="">
<br/>
<input type="button" id="return" name="return" value="back"/>
</form>

</body>
<script type="text/javascript">
$("#return").click(function(){
var isValid = $("#form1").form('validate');
if(isValid){
//表单验证成功了。
}
});
</script>
说明：
最小值属性为min
最大值属性为max
precision表示小数位数
当输入的不是数字时，会自动值为空，保证输入的只是数字。
如果输入的数值不在最小值到最大值之间，则会控制显示。如果超过最大值，则会设置为最大值。如果小于最小值，则会设置为最小值。

数字输入框-最小值~最大值-必填项
<input class="easyui-numberbox" type="text" required data-options="min:10,max:20,precision:0" name="" value="">
示例：
<body>
<form id="form1" method="post">
<input class="easyui-numberbox" type="text" required data-options="min:10,max:20,precision:0" name="" value="">
<br/>
<input type="button" id="return" name="return" value="back"/>
</form>

</body>
<script type="text/javascript">
$("#return").click(function(){
var isValid = $("#form1").form('validate');
if(isValid){
//表单验证成功了。
}
});
</script>
说明：
整合数字最小值~最大值和必填项

简单输入框验证。
如果一个输入框只需要必填。而不想设置为easyui-textbox。这时只需要支持必填属性的控件即可。
如：<input type="text" class="easyui-validatebox" required ></input>

jquery的easyui验证整合my97日历插件。
如：
引入jquery的easyui所需要的文件（见最上面介绍）
和
my97插件所需要的文件（<script type="text/javascript" src="./My97DatePicker/WdatePicker.js"></script>）。

<input type="text" class="easyui-validatebox Wdate" required οnfοcus="WdatePicker({isShowWeek:true,dateFmt:'yyyy-MM-dd'})"></input>
示例：
<body>
<form id="form1" method="post">
<input type="text" class="easyui-validatebox Wdate" required οnfοcus="WdatePicker({isShowWeek:true,dateFmt:'yyyy-MM-dd'})"></input>
<br/>
<input type="button" id="return" name="return" value="back"/>
</form>

</body>
<script type="text/javascript">
$("#return").click(function(){
var isValid = $("#form1").form('validate');
if(isValid){
//表单验证成功了。
}
});
</script>

说明：
需要必填则需要easyui-validatebox的class加入。同时将Wdate也加入到class中。
然后添加required控制。
最后添加οnfοcus="WdatePicker({isShowWeek:true,dateFmt:'yyyy-MM-dd'})"控制。

综述：
至此了解了jquery的easyui验证。
包括：
基本输入框的长度、必填项、
数字输入框的最小值到最大值、必填项
简单输入框的必填项验证。
jquery的easyui整合my97日历插件的必填项的验证。

xclsky1120

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jqueryEasyui_验证

引入jqueryeasyui：href="./js/jquery-easyui-1.4.3/themes/default/easyui.css">href="./js/jquery-easyui-1.4.3/themes/icon.css">src="./js/jquery-easyui-1.4.3/jquery.min.js">src="./js/jquery-e
复制链接

扫一扫