插件

验证插件(Validate.js)

首先到官网下载https://jqueryvalidation.org/,也可以使用cdn。
然在头文件引用该插件即可,和引入Jquery方式一样。

例如you表单:

<form>
    <p>用户名:<input type="text" name="user"/>*</p>
    <p>邮 件:<input type="text"  name="eamil"/>*</p>
    <p>网 址:<input type="text" name="URl"/></p>
    <p><input type="submit" value="提交"/></p>
</form>
验证非空:

因为表单的用户名和邮件为必填项(*),所以需要验证。方法为:

$(function(){
    $('form').validate();  //表单加载validate插件。若希望达成上述效果,非空验证,只需要在代码中加入(class="required")即可。
});

如下:

<form>
    <p>用户名:<input type="text" class="required" name="user"/>*</p>
    <p>邮 件:<input type="text"  class="required" name="eamil"/>*</p>
    <p>网 址:<input type="text" name="URl"/></p>
    <p><input type="submit" value="提交"/></p>
</form>
验证长度:

比如,需要验证用户名不能少于8位。则只需要加入(minlength=”8”)即可。如:

<form>
    <p>用户名:<input type="text" class="required" minlength="8" name="user"/>*</p>
    <p>邮 件:<input type="text"  class="required" name="eamil"/>*</p>
    <p>网 址:<input type="text" name="URl"/></p>
    <p><input type="submit" value="提交"/></p>
</form>
邮件格式验证:

若需要验证邮箱格式,则只需要在 required后加入 “eamil”即可,(class=”required email”),如:

<form>
    <p>用户名:<input type="text" class="required"  minlength="8" name="user"/>*</p>
    <p>邮 件:<input type="text"  class="required eamil" name="eamil"/>*</p>
    <p>网 址:<input type="text" name="URl"/></p>
    <p><input type="submit" value="提交"/></p>
</form>
网址格式验证:

只需要加入(class=”url”)即可。

注意,验证网址格式后,输入框必必须要输入如:http://www.demo.com。才正确,错误示范:www.demo.com。

中文包提示以及个性化提示:

由于默认的提示是英文提示,若需要中文提示则需要安装中文包提示,名称为(jquery.validate.messages_zh.js),自行下载该包即可。引入方式和上面一样,提示内容可以在js文件中自行修改。

注:其他功能仔细阅读手册即可。

手动编写插件

插件按照功能分类。一般分三类:
1.封装对象方法的插件;(也就是基于某个DOM元素的Jquery对象,局部性);
2.封装全局函数的插件;(全局性的封装);
3.选择器插件。(类似.find())(jquery自带已经很完善,所以不需要额外封装)

首先自定文件名,比如:jquery.demo.js。
代码如下:

;(function($)){       //前面加分号是为了防止和前面的js文件冲突。

}(jQuery);

略…

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值