JQuery 简单表单验证
2024-05-10 08:43:22
菜鸟教程 | 表单验证实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script src="https://static.runoob.com/assets/jquery-validation-1.14.0/lib/jquery.js"></script>
<script src="https://static.runoob.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script>
<script src="https://static.runoob.com/assets/jquery-validation-1.14.0/dist/localization/messages_zh.js"></script>
<script>
$.validator.setDefaults({submitHandler: function() {alert("提交事件!");// form.submit();}
});
$().ready(function() {
// 在键盘按下并释放及提交后验证提交表单$("#signupForm").validate({rules: {firstname: "required",lastname: "required",username: {required: true,minlength: 2},password: {required: true,minlength: 5},confirm_password: {required: true,minlength: 5,equalTo: "#password"},email: {required: true,email: true},"topic[]": {required: "#newsletter:checked",minlength: 2},agree: "required"},messages: {firstname: "请输入您的名字",lastname: "请输入您的姓氏",username: {required: "请输入用户名",minlength: "用户名必需由两个字母组成"},password: {required: "请输入密码",minlength: "密码长度不能小于 5 个字母"},confirm_password: {required: "请输入密码",minlength: "密码长度不能小于 5 个字母",equalTo: "两次密码输入不一致"},email: "请输入一个正确的邮箱",agree: "请接受我们的声明",topic: "请选择两个主题"}});
});
</script>
<style>
.error{color:red;
}
</style>
</head>
<body>
<form class="cmxform" id="signupForm" method="get" action=""><fieldset><legend>验证完整的表单</legend><p><label for="firstname">名字</label><input id="firstname" name="firstname" type="text"></p><p><label for="lastname">姓氏</label><input id="lastname" name="lastname" type="text"></p><p><label for="username">用户名</label><input id="username" name="username" type="text"></p><p><label for="password">密码</label><input id="password" name="password" type="password"></p><p><label for="confirm_password">验证密码</label><input id="confirm_password" name="confirm_password" type="password"></p><p><label for="email">Email</label><input id="email" name="email" type="email"></p><p><label for="agree">请同意我们的声明</label><input type="checkbox" class="checkbox" id="agree" name="agree"></p><p><label for="newsletter">我乐意接收新信息</label><input type="checkbox" class="checkbox" id="newsletter" name="newsletter"></p><fieldset id="newsletter_topics"><legend>主题 (至少选择两个) - 注意：如果没有勾选“我乐意接收新信息”以下选项会隐藏，但我们这里作为演示让它可见</legend><label for="topic_marketflash"><input type="checkbox" id="topic_marketflash" value="marketflash" name="topic[]">Marketflash</label><label for="topic_fuzz"><input type="checkbox" id="topic_fuzz" value="fuzz" name="topic[]">Latest fuzz</label><label for="topic_digester"><input type="checkbox" id="topic_digester" value="digester" name="topic[]">Mailing list digester</label><label for="topic" class="error" style="display:none">至少选择两个</label></fieldset><p><input class="submit" type="submit" value="提交"></p></fieldset>
</form>
</body>
</html>
菜鸟教程 | radio（单选按钮）、checkbox（复选按钮）和 select（下拉框）验证实例
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery Validate 插件 - radio（单选按钮）、checkbox（复选按钮）和 select（下拉框）</title><script src="https://static.runoob.com/assets/jquery-validation-1.14.0/lib/jquery.js"></script>
<script src="https://static.runoob.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script>
<script src="https://static.runoob.com/assets/jquery-validation-1.14.0/dist/localization/messages_zh.js"></script>
<style>
.error{color:red;
}
</style>
<script>
// 只用于演示
$.validator.setDefaults({submitHandler: function() {alert("submitted!");}
});$(document).ready(function() {$("#form1").validate();$("#selecttest").validate();
});
</script><style>
.block { display: block; }
form.cmxform label.error { display: none; }
</style></head>
<body><div id="main"><form class="cmxform" id="form1" method="get" action=""><fieldset><legend>通过 radio（单选按钮）和 checkbox（复选按钮）验证表单</legend><fieldset><legend>性别</legend><label for="gender_male"><input type="radio" id="gender_male" value="m" name="gender" required>男性</label><label for="gender_female"><input type="radio" id="gender_female" value="f" name="gender">女性</label><label for="gender" class="error">请选择您的性别。</label></fieldset><fieldset><legend>婚姻状况</legend><label for="family_single"><input type="radio" id="family_single" value="s" name="family" required>单身</label><label for="family_married"><input type="radio" id="family_married" value="m" name="family">已婚</label><label for="family_other"><input type="radio" id="family_other" value="o" name="family">其他</label><label for="family" class="error">您选择您的婚姻状况。</label></fieldset><p><label for="agree">请同意我们的条款</label><input type="checkbox" class="checkbox" id="agree" name="agree" required><br><label for="agree" class="error block">请同意我们的条款！</label></p><fieldset><legend>垃圾邮件</legend><label for="spam_email"><input type="checkbox" class="checkbox" id="spam_email" value="email" name="spam[]" required minlength="2">垃圾邮件 - E-Mail</label><label for="spam_phone"><input type="checkbox" class="checkbox" id="spam_phone" value="phone" name="spam[]">垃圾邮件 - Phone</label><label for="spam_mail"><input type="checkbox" class="checkbox" id="spam_mail" value="mail" name="spam[]">垃圾邮件 - Mail</label><label for="spam[]" class="error">请选择至少两种类型的垃圾邮件。</label></fieldset><p><input class="submit" type="submit" value="提交"></p></fieldset>
</form><form id="selecttest"><h2>一些关于 select 的测试</h2><p><label for="jungle">请选择一个丛林名词</label><br><select id="jungle" name="jungle" title="请选择一个丛林名词！" required><option value=""></option><option value="1">Buga</option><option value="2">Baga</option><option value="3">Oi</option></select></p><p><label for="fruit">请选择至少两种水果</label><br><select id="fruit" name="fruit" title="请选择至少两种水果！" required minlength="2" multiple="multiple"><option value="b">Banana</option><option value="a">Apple</option><option value="p">Peach</option><option value="t">Turtle</option></select></p><p><label for="vegetables">请选择不超过两种蔬菜</label><br><select id="vegetables" name="vegetables" title="请选择不超过两种蔬菜！" required maxlength="2" multiple="multiple"><option value="p">Potato</option><option value="t">Tomato</option><option value="s">Salad</option></select></p><p><label for="cars">请选择至少两种但不超过三种汽车</label><br><select id="cars" name="cars" title="请选择至少两种但不超过三种汽车！" required rangelength="[2,3]" multiple="multiple"><option value="m_sl">Mercedes SL</option><option value="o_c">Opel Corsa</option><option value="vw_p">VW Polo</option><option value="t_s">Titanic Skoda</option></select></p><p><input type="submit" value="Validate Select 测试"></p>
</form>
</div>
</body>
</html>
表单元素获取 val()
<body><p>名称: <input type="text" name="user"></p>
<button>点击获取</button></body>
<script>$(document).ready(function(){$("button").click(function(){alert($("input:text").val());});
});
</script>
表单元素赋值 val() attr()
<body><p>名称: <input type="text" name="user"></p>
<button>点击赋值</button></body><script>
$(document).ready(function(){$("button").click(function(){// 两种方式都行// $("input:text").val("hello world");$("input:text").attr("value","hello world");});
});
</script>
设置属性 attr()
<body><img src="img_pulpitrock.jpg" alt="Pulpit Rock" width="284" height="213">
<br>
<button>为图片设置width属性</button></body><script>
$(document).ready(function(){$("button").click(function(){$("img").attr("width","500").attr("height","500");});
});
</script>
动态修改div层的尺寸
<!DOCTYPE html>
<html lang="en">
<head><meta charset="utf-8"><title>test</title><script src="jquery-2.0.3.js"></script><style type="text/css">#div1{border:1px solid #F00; width:200px; height:100px;}</style>
</head>
<body>
宽<input type="text" id="w">像素<br>
高<input type="text" id="h">像素<br>
<input type="button" id="btn" value="修改尺寸"><br>
<div id="div1">
</div>
<br>
<script language="javascript">//JQuery函数，鼠标悬停事件$("#btn").click(function(){var w=$("#w").val();var h=$("#h").val();//$("#div1").width(w).height(h);$("#div1").css("width",w+"px").css("height",h+"px");});
</script></body>
</html>
Java 菜鸟，积累实用的例子
JQuery 简单表单验证相关推荐
- 【html+js+jquery简单表单验证和删查】
结果图 1:需求包 2:文件1 <!DOCTYPE html> <html><head><meta charset="UTF-8"> ...
- html中表单的校验的插件,功能强大的jquery.validate表单验证插件
本文实例为大家分享了jquery.validate表单验证的使用方法,供大家参考,具体内容如下 1 .表单验证的准备工作 在开启长篇大论之前,首先将表单验证的效果展示给大家. 1.点击表单项,显示帮助 ...
- 整理的16个有用的jQuery Form(表单)验证教程
表单在每个网站开发者必不可少的组成部份,而最烦繁的也是表单验证部份,借助于jQuery一些现有成熟的插件,可以大大减少我们的开发工作量以及减少很多重复出现的问题 ,这篇文章将整理出非常好的16篇非常有 ...
- 基于jQuery的表单验证插件：jValidate
网上基于jQuery的表单验证插件已有很多,但是这个轮子我还是继续做一个,因为这个表单验证插件是从我以前的个人JS框架移值过来的(我已慢慢投入jQuery的怀抱),并且它的验证规则书写方式也许会让你眼 ...
- Jquery ValidateEngine表单验证
Jquery ValidateEngine表单验证 用法:http://www.position-relative.net/creation/formValidator/demoValidators. ...
- jQuery的表单验证
jQuery的表单验证 直接上代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8" ...
- JQuery实现表单验证(注册页面)
注册页面功能实现: 验证会员名密码不能为空或者包含空格,并且保证长度至少6位 验证邮箱符合规则,并且不能为空 重复密码要与密码一致 1.页面的样式 <form action="#&qu ...
- jQuery实现表单验证
1.基于html表单,利用jQuery实现表单验证功能. 2.html基本结构和样式: 3.html代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHT ...
- JQuery.validationEngine表单验证插件
一.说明 JQuery.validationEngine表单验证控件功能强大,自带了样式显示模式: 1.字符类型:非空验证.最大长度.最小长度.相等判断.数字和空格.数字和英文字母 2.数字类型:数字 ...
- js与php表单验证,JS简单表单验证功能完整示例
本文实例讲述了JS简单表单验证功能.分享给大家供大家参考,具体如下: 简单js表单验证demo Document //当用户名获取焦点时 function focus_username(){ docu ...
最新文章
- SaltStack介绍——SaltStack是一种新的基础设施管理方法开发软件,简单易部署,可伸缩的足以管理成千上万的服务器,和足够快的速度控制,与他们交流...
- 用java将excel数据导入txt
- Vim改装编辑器的安装与使用简介
- 解析网络诊断利器SreCli-Net
- 转：【图文教程】创建Xcode自定义模板
- Team photo的新api
- Python实现GCS bucket断点续传功能，分块上传文件
- 高精度加减乘法小程序
- java数组为什么可以迭代吗_在迭代2D数组时，为什么循环的顺序会影响性能？
- hbase 集群（完全分布式）方式安装
- keepalived安装及配置文件详解
- mysql 自增长id string_Mysql中获取刚插入的自增长id的三种方法归纳
- python slice函数_python中slice函数如何实现？
- Python 音频: sounddevice 使用 左声道/右声道/立体声 --- 播放,录音
- u盘修复计算机w7,制作win7系统修复u盘的方法
- vs2017安装勾选哪些_Visual Studio2017安装教程
- 苹果库乐队怎么玩_苹果手机如何自定义铃声？这个方法最简单。
- 扎实干货！PP-Tracking：百度提出实时目标跟踪系统（附源码教程）
- zblog php修改代码,zblog模板建站新上线必须修改的优化代码
- 双硬盘SSD+HDD安装双系统win10+Ubuntu16.04