第六天 我为集成平台狂(四)-步履轻盈的JQuery(二)

2023-11-02 03:30

本文主要是介绍第六天 我为集成平台狂(四)-步履轻盈的JQuery(二),希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

         3月6日,小雨,温度有点低,“乍暖还寒时候,最难将息”。研究了集成平台的验证方法,似乎用的jquery.validate,从平台生成的JS文件夹里,发现了jquery.validate.js文件,肯定了俺的判断。有必要挖一挖jquery.validate.js的使用方法,奋斗极具实用性。

      1、牛刀小试

      第一步,官方网站下载jquery.validate.js:http://bassistance.de/jquery-plugins/jquery-plugin-validation/。导入jquery.validate库,放在jquery-1.8.3.js的后面,注意顺序不要颠倒

                     <script src="js/jquery-1.8.3.js"></script>
                   <script src="js/jquery.validate.js"></script>

         第二步,编写测试表单validateTest.html        

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>JQuery Test</title>
<script src="js/jquery-1.8.3.js"></script>
<script src="js/jquery.validate.js"></script>
<script src="js/myValidate1.js"></script>
</head><body><form id="testForm" name="form1" method="get" action=""><p> 用户名:<input type="text" name="loginName"   class="required"><p>电子邮件:<input type="text" name="eMail" class="required email"><p>手机:<input type="text" name="cellPhone" class="required mobile"><p> 密码:<input type="password" name="password" id="password"class="required"><p>密码验证:<input type="password" name="password2" class="required"><p><input class="submit" type="submit" name="button" id="button" value="提交" /></p></form>
</body>
</html>

              第三步,添加脚本myValidate1.js来进行验证      

$(document).ready(function(e) {$("#testForm").validate({})
});

             运行测试表单validateTest.html,不填任何内容,点击确定按钮,结果如图:

        很神奇的情况出现了,我们没有写任何信息提示,但是,提示如愿而至,太爽了大笑但是,高兴的太早,提示信息是洋文生气为什么会出现这种状况?

         分析一下代码,在validateTest.html中,class属性表示验证规则,其中required表示必填的,number表示必须是数字,email表示必须是电子邮件格式,如果写成required email表示这个字段必须填写同时必须是email格式;那么required number mobile,就是满足必填-数字-mobile格式这三个校验条件

          由于验证规则写到字段元素的class属性中 ,所以myValidate1.js中的内容只有一句  $("#testForm").validate(),即可完成最简单的字段验证。 

               那么,善于刨根问底的你也许好奇提示消息的出处?疑问别急,打开jQuery.Validate源代码(1.11.1版),在281行,会发现这些提示消息的定义方式安静。当然jQuery.Validate还提供许多验证方法,如电子邮件,网址,日期,范围,最大值,最小值,整数,值比较等多种验证方式,在993行可以找到。源代码如下:

messages: {required: "This field is required.",remote: "Please fix this field.",email: "Please enter a valid email address.",url: "Please enter a valid URL.",date: "Please enter a valid date.",dateISO: "Please enter a valid date (ISO).",number: "Please enter a valid number.",digits: "Please enter only digits.",creditcard: "Please enter a valid credit card number.",equalTo: "Please enter the same value again.",maxlength: $.validator.format("Please enter no more than {0} characters."),minlength: $.validator.format("Please enter at least {0} characters."),rangelength: $.validator.format("Please enter a value between {0} and {1} characters long."),range: $.validator.format("Please enter a value between {0} and {1}."),max: $.validator.format("Please enter a value less than or equal to {0}."),min: $.validator.format("Please enter a value greater than or equal to {0}.")},

methods: {// http://docs.jquery.com/Plugins/Validation/Methods/requiredrequired: function( value, element, param ) {// check if dependency is metif ( !this.depend(param, element) ) {return "dependency-mismatch";}if ( element.nodeName.toLowerCase() === "select" ) {// could be an array for select-multiple or a string, both are fine this wayvar val = $(element).val();return val && val.length > 0;}if ( this.checkable(element) ) {return this.getLength(value, element) > 0;}return $.trim(value).length > 0;},// http://docs.jquery.com/Plugins/Validation/Methods/emailemail: function( value, element ) {// contributed by Scott Gonzalez: http://projects.scottsplayground.com/email_address_validation/return this.optional(element) || /^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))$/i.test(value);},
...

       2、刨丁解牛

        如果把想把消息改成中文的方式,可以直接把英文提示改成中文,抓狂这样太过生猛,破坏力太强。通常是写一个扩展文件,下节介绍。

        本节想自己写一个中文提示,再加一些限制条件,如长度、范围等。

        修改脚本myValidate1.js如下:

function lang(key) {   mylang = {   'ls_input_name': '请输入您的用户名', 'ls_input_name_length': '用户名的长度为{0}位',     'ls_input_email': '请输入您的邮箱地址',   'ls_input_valid_email': '请输入正确邮箱地址','ls_input_cellphone':'请输入您的手机号','ls_input_valid_number':'请输入有效数字','ls_input_valid_cellphone':'请输入正确手机号码','ls_login_password': '请输入您的登录密码',   'ls_password_length': '密码长度为{0}-{1}位之间',   'ls_input_captcha': '请输入验证码',   'ls_equal_captcha': '请输入和密码相同的内容',   };        return mylang[key];   }   $(function(){$("#testForm").validate({rules: {loginName: { required: true, minlength: 2},password: { required: true , rangelength: [6, 12] },password2: { required: true , equalTo: "#password" }			},messages:{loginName:{required: lang('ls_input_name'),minlength: lang('ls_input_name_length')},eMail:{required: lang('ls_input_email'),email: lang('ls_input_valid_email') },cellPhone:{required: lang('ls_input_cellphone'),number: lang('ls_input_valid_number'), mobile: lang('ls_input_valid_cellphone') },password:{required: lang('ls_login_password'),rangelength: lang('ls_password_length')},password2:{required: lang('ls_input_captcha'),equalTo: lang('ls_equal_captcha')}}});
});

               重新运行测试表单validateTest.html,不填任何内容,点击确定按钮,结果如图:

          

                        中文提示终于出现了偷笑,别得意,还有多种验证方式呐敲打

                     可叹,JQuery的精巧与迅捷,直指人心,痛快淋漓,让人折服羡慕

        3、游刃有余

                    jquery.validate.js 提供了基础的 电子邮件、URL、 日期等验证, 但是在实际开发中可能会有新的验证规则,这个需要我们自己定义一个,如上例中的mobile,就没有定义验证规则。故需要额外添加自定义校验     jquery.validate.extends.js。放在jquery.validate.js的后面,注意顺序不要颠倒

                     <script src="js/jquery-1.8.3.js"></script>
                     <script src="js/jquery.validate.js"></script>

                     <script src="js/jquery.validate.extends.js"></script>

jquery.validate.extends.js代码如下:

jQuery.extend(jQuery.validator.messages, {  required: "必选字段",  remote: "请修正该字段",  email: "请输入正确格式的电子邮件",  url: "请输入合法的网址",  date: "请输入合法的日期",  dateISO: "请输入合法的日期 (ISO).",  number: "请输入合法的数字",  digits: "只能输入整数",  creditcard: "请输入合法的信用卡号",  equalTo: "请再次输入相同的值",  accept: "请输入拥有合法后缀名的字符串",  maxlength: jQuery.validator.format("允许的最大长度为 {0} 个字符"),  minlength: jQuery.validator.format("允许的最小长度为 {0} 个字符"),  rangelength: jQuery.validator.format("允许的长度为{0}和{1}之间"),  range: jQuery.validator.format("请输入介于 {0} 和 {1} 之间的值"),  max: jQuery.validator.format("请输入一个最大为 {0} 的值"),  min: jQuery.validator.format("请输入一个最小为 {0} 的值") 
});// 手机号码验证jQuery.validator.addMethod("mobile", function(value, element) {var length = value.length;//长度为11,以13,15,18开头的return this.optional(element) || (length == 11 && /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/.test(value));}, "手机号码格式不对"); 

        自定义验证方法(addMethodname, method, message)就写了一个手机号码验证,如需新的验证方法,可自己添加。

        修改脚本myValidate1.js 如下:

$(function(){$("#testForm").validate({rules: {loginName: { required: true, minlength: 2},password: { required: true , rangelength: [6, 12] },password2: { required: true , equalTo: "#password" }			}});});

       重新运行测试表单validateTest.html,填写测试内容,点击确定按钮,结果如图:


       其实,校验规则既可以写到html的控件中,也可以写在js代码中,写在js中较整洁些。


       












































































http://www.douban.com/note/375865795/
http://www.douban.com/note/375865885/
http://www.douban.com/note/375865924/
http://www.douban.com/note/375865978/
http://www.douban.com/note/375866028/
http://www.douban.com/note/375866077/
http://www.douban.com/note/375866137/
http://www.douban.com/note/375866213/
http://www.douban.com/note/375866432/
http://www.douban.com/note/375866455/
http://www.douban.com/note/375866508/
http://www.douban.com/note/375866540/
http://www.douban.com/note/375866593/
http://www.douban.com/note/375866651/
http://www.douban.com/note/375866689/

http://www.douban.com/note/375868477/
http://www.douban.com/note/375868509/
http://www.douban.com/note/375868552/
http://www.douban.com/note/375868617/
http://www.douban.com/note/375868689/
http://www.douban.com/note/375868724/
http://www.douban.com/note/375868756/
http://www.douban.com/note/375868794/







http://www.douban.com/note/375850124/
http://www.douban.com/note/375850200/
http://www.douban.com/note/375850296/
http://www.douban.com/note/375850595/
http://www.douban.com/note/375850655/
http://www.douban.com/note/375851221/
http://www.douban.com/note/375851367/
http://www.douban.com/note/375851381/
http://www.douban.com/note/375851603/
http://www.douban.com/note/375851661/
http://www.douban.com/note/375851787/
http://www.douban.com/note/375851830/
http://www.douban.com/note/375851877/
http://www.douban.com/note/375851995/
http://www.douban.com/note/375852068/
http://www.douban.com/note/375852120/

http://www.douban.com/note/375850023/
http://www.douban.com/note/375850063/
http://www.douban.com/note/375850097/
http://www.douban.com/note/375850189/
http://www.douban.com/note/375850281/
http://www.douban.com/note/375850349/
http://www.douban.com/note/375850379/
http://www.douban.com/note/375850427/
http://www.douban.com/note/375850706/
http://www.douban.com/note/375850911/
http://www.douban.com/note/375850998/
http://www.douban.com/note/375851051/
http://www.douban.com/note/375851082/
http://www.douban.com/note/375851170/
http://www.douban.com/note/375851214/
http://www.douban.com/note/375851333/
http://www.douban.com/note/375851655/
http://www.douban.com/note/375851756/
http://www.douban.com/note/375851828/
http://www.douban.com/note/375851867/
http://www.douban.com/note/375851922/
http://www.douban.com/note/375851971/
http://www.douban.com/note/375852050/
http://www.douban.com/note/375852231/

http://www.douban.com/note/375853427/
http://www.douban.com/note/375853492/
http://www.douban.com/note/375853612/
http://www.douban.com/note/375853664/
http://www.douban.com/note/375853732/
http://www.douban.com/note/375853787/
http://www.douban.com/note/375853823/
http://www.douban.com/note/375853871/
http://www.douban.com/note/375854261/
http://www.douban.com/note/375854365/
http://www.douban.com/note/375854434/
http://www.douban.com/note/375854531/
http://www.douban.com/note/375854885/
http://www.douban.com/note/375854988/
http://www.douban.com/note/375855020/
http://www.douban.com/note/375855312/
http://www.douban.com/note/375855417/
http://www.douban.com/note/375855512/
http://www.douban.com/note/375855541/
http://www.douban.com/note/375855611/
http://www.douban.com/note/375855747/

http://www.douban.com/note/375853319/
http://www.douban.com/note/375853348/
http://www.douban.com/note/375853375/
http://www.douban.com/note/375853446/
http://www.douban.com/note/375853538/
http://www.douban.com/note/375853575/
http://www.douban.com/note/375853628/
http://www.douban.com/note/375853724/
http://www.douban.com/note/375853835/
http://www.douban.com/note/375853880/
http://www.douban.com/note/375853930/
http://www.douban.com/note/375854013/
http://www.douban.com/note/375854084/
http://www.douban.com/note/375854106/
http://www.douban.com/note/375854128/
http://www.douban.com/note/375854195/
http://www.douban.com/note/375854458/
http://www.douban.com/note/375854525/
http://www.douban.com/note/375854585/
http://www.douban.com/note/375854670/
http://www.douban.com/note/375854777/
http://www.douban.com/note/375854818/
http://www.douban.com/note/375854873/
http://www.douban.com/note/375854925/
http://www.douban.com/note/375855117/
http://www.douban.com/note/375855173/
http://www.douban.com/note/375855269/
http://www.douban.com/note/375855360/
http://www.douban.com/note/375855449/
http://www.douban.com/note/375855525/
http://www.douban.com/note/375855565/
http://www.douban.com/note/375855650/
http://www.douban.com/note/375855959/
http://www.douban.com/note/375855983/
http://www.douban.com/note/375856017/
http://www.douban.com/note/375856045/
http://www.douban.com/note/375856059/
http://www.douban.com/note/375856107/
http://www.douban.com/note/375856188/

http://www.douban.com/note/375857349/
http://www.douban.com/note/375857403/
http://www.douban.com/note/375857487/
http://www.douban.com/note/375857550/
http://www.douban.com/note/375857616/
http://www.douban.com/note/375857655/
http://www.douban.com/note/375857695/
http://www.douban.com/note/375857763/
http://www.douban.com/note/375857881/
http://www.douban.com/note/375857906/
http://www.douban.com/note/375857942/
http://www.douban.com/note/375857981/
http://www.douban.com/note/375858015/
http://www.douban.com/note/375858070/
http://www.douban.com/note/375858139/
http://www.douban.com/note/375858187/
http://www.douban.com/note/375858381/
http://www.douban.com/note/375858457/
http://www.douban.com/note/375858500/
http://www.douban.com/note/375858567/
http://www.douban.com/note/375858596/
http://www.douban.com/note/375858626/
http://www.douban.com/note/375858662/
http://www.douban.com/note/375858715/
http://www.douban.com/note/375858905/
http://www.douban.com/note/375858957/
http://www.douban.com/note/375859068/
http://www.douban.com/note/375859113/
http://www.douban.com/note/375859136/
http://www.douban.com/note/375859193/
http://www.douban.com/note/375859269/
http://www.douban.com/note/375859299/
http://www.douban.com/note/375859478/
http://www.douban.com/note/375859543/
http://www.douban.com/note/375859611/
http://www.douban.com/note/375859643/
http://www.douban.com/note/375859701/
http://www.douban.com/note/375859738/
http://www.douban.com/note/375859756/
http://www.douban.com/note/375859794/

http://www.douban.com/note/375860041/
http://www.douban.com/note/375860750/
http://www.douban.com/note/375860823/
http://www.douban.com/note/375860861/
http://www.douban.com/note/375860905/
http://www.douban.com/note/375860956/
http://www.douban.com/note/375861074/
http://www.douban.com/note/375861111/
http://www.douban.com/note/375861267/
http://www.douban.com/note/375861303/
http://www.douban.com/note/375861332/
http://www.douban.com/note/375861417/
http://www.douban.com/note/375861548/
http://www.douban.com/note/375861610/
http://www.douban.com/note/375861653/
http://www.douban.com/note/375861687/
http://www.douban.com/note/375861812/
http://www.douban.com/note/375861852/
http://www.douban.com/note/375861909/
http://www.douban.com/note/375861947/
http://www.douban.com/note/375861963/
http://www.douban.com/note/375861991/
http://www.douban.com/note/375862018/
http://www.douban.com/note/375862052/
http://www.douban.com/note/375862193/
http://www.douban.com/note/375862232/
http://www.douban.com/note/375862328/
http://www.douban.com/note/375862378/
http://www.douban.com/note/375862428/
http://www.douban.com/note/375862465/
http://www.douban.com/note/375862518/
http://www.douban.com/note/375862585/
http://www.douban.com/note/375862726/
http://www.douban.com/note/375862825/
http://www.douban.com/note/375862870/
http://www.douban.com/note/375862915/
http://www.douban.com/note/375862943/
http://www.douban.com/note/375862971/
http://www.douban.com/note/375863046/
http://www.douban.com/note/375863185/

http://www.douban.com/note/375864680/
http://www.douban.com/note/375864729/
http://www.douban.com/note/375864775/
http://www.douban.com/note/375864802/
http://www.douban.com/note/375864864/
http://www.douban.com/note/375864920/
http://www.douban.com/note/375864942/
http://www.douban.com/note/375865014/

这篇关于第六天 我为集成平台狂(四)-步履轻盈的JQuery(二)的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/327790

相关文章

Vue3 的 shallowRef 和 shallowReactive:优化性能

大家对 Vue3 的 ref 和 reactive 都很熟悉,那么对 shallowRef 和 shallowReactive 是否了解呢? 在编程和数据结构中,“shallow”(浅层)通常指对数据结构的最外层进行操作,而不递归地处理其内部或嵌套的数据。这种处理方式关注的是数据结构的第一层属性或元素,而忽略更深层次的嵌套内容。 1. 浅层与深层的对比 1.1 浅层(Shallow) 定义

流媒体平台/视频监控/安防视频汇聚EasyCVR播放暂停后视频画面黑屏是什么原因?

视频智能分析/视频监控/安防监控综合管理系统EasyCVR视频汇聚融合平台,是TSINGSEE青犀视频垂直深耕音视频流媒体技术、AI智能技术领域的杰出成果。该平台以其强大的视频处理、汇聚与融合能力,在构建全栈视频监控系统中展现出了独特的优势。视频监控管理系统EasyCVR平台内置了强大的视频解码、转码、压缩等技术,能够处理多种视频流格式,并以多种格式(RTMP、RTSP、HTTP-FLV、WebS

这15个Vue指令,让你的项目开发爽到爆

1. V-Hotkey 仓库地址: github.com/Dafrok/v-ho… Demo: 戳这里 https://dafrok.github.io/v-hotkey 安装: npm install --save v-hotkey 这个指令可以给组件绑定一个或多个快捷键。你想要通过按下 Escape 键后隐藏某个组件,按住 Control 和回车键再显示它吗?小菜一碟: <template

【 html+css 绚丽Loading 】000046 三才归元阵

前言:哈喽,大家好,今天给大家分享html+css 绚丽Loading!并提供具体代码帮助大家深入理解,彻底掌握!创作不易,如果能帮助到大家或者给大家一些灵感和启发,欢迎收藏+关注哦 💕 目录 📚一、效果📚二、信息💡1.简介:💡2.外观描述:💡3.使用方式:💡4.战斗方式:💡5.提升:💡6.传说: 📚三、源代码,上代码,可以直接复制使用🎥效果🗂️目录✍️

【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画(下)

【课程链接】 AntV G6:深入图形与图形分组、自定义节点、节点动画(下)_哔哩哔哩_bilibili 本章十吾老师讲解了一个复杂的自定义节点中,应该怎样去计算和绘制图形,如何给一个图形制作不间断的动画,以及在鼠标事件之后产生动画。(有点难,需要好好理解) <!DOCTYPE html><html><head><meta charset="UTF-8"><title>06

综合安防管理平台LntonAIServer视频监控汇聚抖动检测算法优势

LntonAIServer视频质量诊断功能中的抖动检测是一个专门针对视频稳定性进行分析的功能。抖动通常是指视频帧之间的不必要运动,这种运动可能是由于摄像机的移动、传输中的错误或编解码问题导致的。抖动检测对于确保视频内容的平滑性和观看体验至关重要。 优势 1. 提高图像质量 - 清晰度提升:减少抖动,提高图像的清晰度和细节表现力,使得监控画面更加真实可信。 - 细节增强:在低光条件下,抖

JAVA智听未来一站式有声阅读平台听书系统小程序源码

智听未来,一站式有声阅读平台听书系统 🌟&nbsp;开篇:遇见未来,从“智听”开始 在这个快节奏的时代,你是否渴望在忙碌的间隙,找到一片属于自己的宁静角落?是否梦想着能随时随地,沉浸在知识的海洋,或是故事的奇幻世界里?今天,就让我带你一起探索“智听未来”——这一站式有声阅读平台听书系统,它正悄悄改变着我们的阅读方式,让未来触手可及! 📚&nbsp;第一站:海量资源,应有尽有 走进“智听

如何解决线上平台抽佣高 线下门店客流少的痛点!

目前,许多传统零售店铺正遭遇客源下降的难题。尽管广告推广能带来一定的客流,但其费用昂贵。鉴于此,众多零售商纷纷选择加入像美团、饿了么和抖音这样的大型在线平台,但这些平台的高佣金率导致了利润的大幅缩水。在这样的市场环境下,商家之间的合作网络逐渐成为一种有效的解决方案,通过资源和客户基础的共享,实现共同的利益增长。 以最近在上海兴起的一个跨行业合作平台为例,该平台融合了环保消费积分系统,在短

Android平台播放RTSP流的几种方案探究(VLC VS ExoPlayer VS SmartPlayer)

技术背景 好多开发者需要遴选Android平台RTSP直播播放器的时候,不知道如何选的好,本文针对常用的方案,做个大概的说明: 1. 使用VLC for Android VLC Media Player(VLC多媒体播放器),最初命名为VideoLAN客户端,是VideoLAN品牌产品,是VideoLAN计划的多媒体播放器。它支持众多音频与视频解码器及文件格式,并支持DVD影音光盘,VCD影

计算机毕业设计 大学志愿填报系统 Java+SpringBoot+Vue 前后端分离 文档报告 代码讲解 安装调试

🍊作者:计算机编程-吉哥 🍊简介:专业从事JavaWeb程序开发,微信小程序开发,定制化项目、 源码、代码讲解、文档撰写、ppt制作。做自己喜欢的事,生活就是快乐的。 🍊心愿:点赞 👍 收藏 ⭐评论 📝 🍅 文末获取源码联系 👇🏻 精彩专栏推荐订阅 👇🏻 不然下次找不到哟~Java毕业设计项目~热门选题推荐《1000套》 目录 1.技术选型 2.开发工具 3.功能