返回顶部下载帮助
网站模板
模板颜色分类:
当前位置: html教程 >

使用jQuery Validation表单验证插件

2020-05-07 文章标签: 表单 浏览次数:

我们讲解下表单的使用,我们先讲解原生的javascript表单验证的写法,然后介绍使用插件验证表达。都可以解决我们问题,只是一个有一定的代码基础,还有种懂点js语法也可以修改达到表单验证。

HTML5教程

今天介绍jQuery Validation插件的用法

jQuery Validation插件

我们引用插件包,然后按照语法使用$("form").validate();就可以了,是不是节省了很多代码量。我们还可以设置属性,比如minlength="2"

设置最大长度和最小长度。验证不通过会在文本右边提示错误信息。默认的是英文,我们可以修改js文件改成中文

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery Validation</title>
<script src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="//freemuban.com/js/507/jquery.validate.js"></script>
<script type="text/javascript">
$(function(){
$("form").validate();
})
</script>
<style type="text/css"></style>
</head>
<body>
<h1>jQuery Validation表单验证</h1>
<form action="" method="POST" class="niceform p1">
    <div>
        <label>姓 名:</label>
        <input type="text" name="inputtext" class="required" minlength="2"/>
    </div>
    <div>
        <label>Email:</label>
        <input id="cemail" name="email" class="required email" />
    </div>
    <div>
        <label> URL :</label>
        <input id="curl" name="url" class="url" value="" />
    </div>
    <div class="clear"></div>
</form>
</body>
</html>



建站咨询 - 联系我们 - 广告服务 - 友情链接 - 版权声明 - 手机版

免责声明:站内所有资源仅供学习与参考,请勿用于商业用途,否则产生的一切后果将由您自己承担!版权归原创者所有,如果侵犯了您的权益,请通知我们,我们会及时删除侵权内容。