这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
这篇文章主要介绍了纯 JS 实现表单验证实例, 非常不错,具有参考借鉴价值,需要的朋友可以参考下
表单我实现了,input 属性是 text(文本框)、radio(单选按钮)、checkbox(多选按钮)的知识点,
fieldset 标签(组合表单中的相关元素)、select 标签(选择列表)和 textarea 标签(多行文本框)。
- <form action="MAILTO:someone@w3school.com.cn" method="post" enctype="text/plain"
- onsubmit="return checkForm()">
- <h2>
- 学生选课基本信息
- </h2>
- 姓名:
- <input type="text" id="name" placeholder="yourname" size="20" onfocus="checkNameFocus()"
- onblur="checkNameBlur()">
- <div id="namePrompt">
- </div>
- <br/>
- 学号:
- <input type="text" id="num" placeholder="yournum" size="20" onfocus="checkNumFocus()"
- onblur="checkNumBlur()">
- <div id="numPrompt">
- </div>
- <br/>
- 性别:
- <label>
- <input type="radio" name="sex" value="男" checked>
- 男
- </label>
- <label>
- <input type="radio" name="sex" value="女">
- 女
- <br/>
- </label>
- 邮箱:
- <input type="text" id="email" placeholder="yourmail" size="20" onfocus="checkEmailFocus()"
- onblur="checkEmailBlur()">
- <div id="emailPrompt">
- </div>
- <br/>
- <fieldset class="classes" id="course" onchange="checkCourse()">
- <legend>
- 可选课程
- </legend>
- <label>
- <input name="Class" type="checkbox" value="" />
- 算法设计
- </label>
- <br/>
- <label>
- <input name="Class" type="checkbox" value="" />
- 人工智能
- </label>
- <br/>
- <label>
- <input name="Class" type="checkbox" value="" />
- 编译原理
- </label>
- <br/>
- <label>
- <input name="Class" type="checkbox" value="" />
- 机器学习
- </label>
- <br/>
- <label>
- <input name="Class" type="checkbox" value="" />
- 计算机网络
- </label>
- </fieldset>
- 喜欢的老师:
- <select name="teacher">
- <option value="0">
- 刘老师
- </option>
- <option value="0">
- 齐老师
- </option>
- <option value="0">
- 李老师
- </option>
- <option value="0">
- 马老师
- </option>
- <option value="0">
- 肖老师
- </option>
- </select>
- <br/>
- 还有话说:
- <br/>
- <textarea id="message" name="message" placeholder="Your Message to Us"
- cols="50" rows="10">
- </textarea>
- <br/>
- <br/>
- <button type="submit">
- 提交
- </button>
- <button type="reset">
- 重置
- </button>
- </form>
CSS 样式如下图:
css 这部分写的不太好,请大家批评指正。(参考的网上的一些资料,网址忘了)
- *{
- margin-left:auto;
- margin-right:auto;
- max-width: 500px;
- background: #F8F8F8;
- padding: 10px;
- font: 12px Arial, Helvetica, sans-serif;
- color: #666;
- border-radius: 5px;
- -webkit-border-radius: 5px;
- -moz-border-radius: 5px;
- }
- body,form{
- padding: 15px;
- /*width: 500px;*/
- background: #F4F4F4;
- }
- h2 {
- padding-bottom:2px;
- *padding:0;
- font: 24px "Trebuchet MS", Arial, Helvetica, sans-serif;
- padding: 20px 0px 20px 40px;
- display: block;
- margin: -30px -30px 10px -30px;
- color: #FFF;
- background: #9DC45F;
- text-shadow: 1px 1px 1px #949494;
- border-radius: 5px 5px 0px 0px;
- -webkit-border-radius: 5px 5px 0px 0px;
- -moz-border-radius: 5px 5px 0px 0px;
- border-bottom:1px solid #89AF4C;
- }
- /*label {
- display: block;
- margin: 0px 0px 0px;
- }*/
- select {
- color: #555;
- height: 30px;
- line-height:12px;
- width: 30%;
- padding: 0px 0px 0px 10px;
- margin-top: 2px;
- border: 1px solid #E5E5E5;
- background: #FBFBFB;
- outline: 0;
- -webkit-box-shadow: inset 1px 1px 2px rgba(238, 238, 238, 0.2);
- box-shadow: inset 1px 1px 2px rgba(238, 238, 238, 0.2);
- font: normal 12px/12px Arial, Helvetica, sans-serif;
- }
- .classes input{
- vertical-align:middle;
- margin-top:-2px;
- margin-bottom:1px;
- height: 35px;
- }
- textarea{
- height:100px;
- width: 90%;
- padding-top: 10px;
- }
- button {
- background-color: #9DC45F;
- border-radius: 5px;
- -webkit-border-radius: 5px;
- -moz-border-border-radius: 5px;
- border:none;
- padding: 10px 25px 10px 25px;
- color: #FFF;
- text-shadow: 1px 1px 1px #949494;
- }
- button:hover {
- background-color:#80A24A;
- }
- #name,#num,#email{vertical-align:middle;}/*input和图片在一行*/
- #namePrompt,#numPrompt,#emailPrompt{
- vertical-align:middle;/*input和图片在一行*/
- display: inline-block;
- padding: 0px;
- color: red;
- background-color:#F4F4F4;
- }
- /*验证表单的格式*/
- /*当鼠标放到文本框时,提示文本的样式*/
- .import_prompt{
- border:solid 1px #ffcd00;
- background-color:#ffffda;
- }
- 下来就是js表单验证了。。。。。。
- 这是js验证的目标。
- 1.当鼠标放在姓名文本框时,提示文本及样式。
- 2./*当鼠标离开姓名文本框时,提示文本及样式*/ 汉字
- 3.当鼠标放在学号文本框时,提示文本及样式。
- 4./*当鼠标离开学号文本框时,提示文本及样式*/只能是数字
- 5.邮箱的验证,必须符合邮箱的格式。
- 6.表单提交时验证表单内容输入的有效性。
- 其中用到了正则表达式来匹配。
- 匹配简体中文的正则是^[\u4e00-\u9fa5]+$
- 匹配邮箱格式的正则是 [\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?
- 直接上代码:
- [javascript] view plain copy 在CODE上查看代码片派生到我的代码片
- // 通过getElementById得到相应元素
- function $(id){
- return document.getElementById(id);
- }
- // 当鼠标放在姓名文本框时,提示文本及样式。
- function checkNameFocus(){
- var userNameId=$("name");
- userNameId.className="import_prompt";
- var namePrompt=$("namePrompt");
- namePrompt.innerhtml="必须是汉字哦~";
- }
- /*当鼠标离开姓名文本框时,提示文本及样式*/
- function checkNameBlur(){
- var namePrompt=$("namePrompt");
- namePrompt.innerHTML=null;
- var reg1=/^[\u4e00-\u9fa5]+$/;//匹配简体中文的正则表达式
- var name=$("name").value;
- // 先查看是否为空
- if(name==""){
- namePrompt.innerHTML="名字不能为空!"
- return false;
- }
- else if(!reg1.test(name)){
- var trueimg=document.createElement("img");
- trueimg.src="./formimages/false.png";
- trueimg.width="15";
- namePrompt.appendChild(trueimg);
- return false;
- }else{
- var trueimg=document.createElement("img");
- trueimg.src="./formimages/true.png";
- trueimg.width="15";
- namePrompt.appendChild(trueimg);
- return true;
- }
- }
- //当鼠标放在学号文本框时,提示文本及样式。
- function checkNumFocus(){
- var studentNum=$("num");
- studentNum.className="import_prompt";
- var numPrompt=$("numPrompt");
- numPrompt.innerHTML="必须是0-9的10位数字哦~";
- }
- /*当鼠标离开学号文本框时,提示文本及样式*/
- function checkNumBlur(){
- var numPrompt=$("numPrompt");
- numPrompt.innerHTML=null;
- var reg2=/^\d{10}$/;
- var xuehao=$("num").value;
- //先验证是否为空
- if(xuehao==""){
- numPrompt.innerHTML="学号不能为空!";
- return false;
- }
- else if(!reg2.test($("num").value)){//好奇怪,使用变量就变成空的了,在外边就有值。
- var trueimg=document.createElement("img");
- trueimg.src="./formimages/false.png";
- trueimg.width="15";
- numPrompt.appendChild(trueimg);
- return false;
- }
- else{
- var trueimg=document.createElement("img");
- trueimg.src="./formimages/true.png";
- trueimg.width="15";
- numPrompt.appendChild(trueimg);
- return true;
- }
- }
- //邮箱的验证,必须符合邮箱的格式。
- function checkEmailFocus(){
- var email=$("email");
- email.className="import_prompt";
- var emailPrompt=$("emailPrompt");
- emailPrompt.innerHTML="请输入您常用的电子邮箱";
- }
- function checkEmailBlur(){
- var emailPro=$("emailPrompt");;
- emailPrompt.innerHTML=null;
- var emailValue=$("email").value;
- var reg3=/[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/;
- //先验证是否为空
- if(emailValue==""){
- emailPrompt.innerHTML="邮箱不能为空!";
- return false;
- }
- else if(!reg3.test(emailValue)){
- var trueimg=document.createElement("img");
- trueimg.src="./formimages/false.png";
- trueimg.width="15";
- emailPrompt.appendChild(trueimg);
- return false;
- }
- else{
- var trueimg=document.createElement("img");
- trueimg.src="./formimages/true.png";
- trueimg.width="15";
- emailPrompt.appendChild(trueimg);
- return true;
- }
- }
- //验证复选框
- function checkCourse(){
- var courses=$("course");
- var cbs = courses.getElementsByTagName("input");
- var b = false;
- for(var i=0;i<cbs.length;i++){
- if(cbs[i].type == "checkbox" && cbs[i].checked){
- b = true;
- }
- }
- if(!b){
- alert("请至少选择一门课程!!!");
- return false;
- }
- }
- //表单提交时验证表单内容输入的有效性
- function checkForm(){
- var flagName=checkNameBlur();
- var flagNum=checkNumBlur();
- var flagEmail=checkEmailBlur();
- var flagCourse=checkCourse();
- if(flagName==true &&flagNum==true &&flagEmail==true &&flagCourse==true){
- return true;
- }
- else{
- return false;
- }
- }
以上所述是小编给大家介绍的纯 JS 实现表单验证实例,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 phperz 网站的支持!
(adsbygoogle = window.adsbygoogle || []).push({});
来源: http://www.phperz.com/article/17/0702/329206.html