(七)JavaScript之[调试]与[前端表单验证]
12】、调试
为什么要去调试?
1.在编写JavaScript时,如果没有调试工具将是一件很痛苦的事情。
2.没有调试工具是很难去编写JavaScript程序的。
3.编写的代码可能包含语法错误、逻辑错误,如果不借助调试工具,这些错误很难去发现
4.帮助找到错误信息的位置
通常,在编写一个新的JavaScript代码过程中都会发生错误
代码调试:在程序代码中寻找错误
console.log()
我用的chrome浏览器[控制台console等]进行调试,因为chrome的开发者工具是最好的前端调试工具
debugger 关键字用于停止执行 JavaScript,并调用调试函数。
这个关键字与在调试工具中设置断点的效果是一样的。
13】、表单验证
<form action="">
邮箱:<input id="email" type="text"/>
<input id="submit" type="button" value="submit" />
</form> <p style="color: red;" id="result"></p>
/**
验证email
并非符合实际开发需要
*/ function $(id) {
return document.getElementById(id);
} var email = $('email');
var result = $('result');
var submit = $('submit'); email.addEventListener('keyup', function () {
if(email.value.indexOf('@') > 0) {
result.innerHTML = '';
}else if(email.value.indexOf('@') < 0) {
result.innerHTML = '请输入正确的邮箱格式,包括@';
}
}, false); submit.addEventListener('click', function () {
if(email.value == null || email.value == ''){
result.innerHTML = '邮箱不得为空';
}else {
//判断长度,不小于6位
if(email.value.length < 6){
result.innerHTML = '邮箱不得小于6位';
}
}
}, false);
(七)JavaScript之[调试]与[前端表单验证]的更多相关文章
- jQuery/javascript实现网页注册的表单验证
<html> <head> <meta charset="utf-8"> <title>注册表单验证</title> & ...
- jQuery简单前端表单验证
<!DOCTYPE html> <html> <head> <title>表单验证</title> <script src=" ...
- 前端表单验证常用的15个JS正则表达式
在表单验证中,使用正则表达式来验证正确与否是一个很频繁的操作,本文收集整理了15个常用的javaScript正则表达式,其中包括用户名.密码强度.整数.数字.电子邮件地址(Email).手机号码.身份 ...
- 最常用的15个前端表单验证JS正则表达式
在表单验证中,使用正则表达式来验证正确与否是一个很频繁的操作,本文收集整理了15个常用的JavaScript正则表达式,其中包括用户名.密码强度.整数.数字.电子邮件地址(Email).手机号码.身份 ...
- JavaScript入门学习笔记(表单验证)
表单验证: 在数据被送到服务器之前对HTML表单中的输入数据进行验证,避免服务器频繁验证信息造成用户体验差. (1)表单数据是否为空 (2)输入的信息格式是否正确 (3)输入数据的类型是否正确 必填( ...
- Web前端表单验证
表单选择器 :input(匹配所有input.textarea.select和button元素) :text(匹配所有单行文本框) :password(匹配所有密码框) :radio(匹配 ...
- 4.前端注册表单验证 && 表单回填
表单验证 前端表单验证就是在 jsp 页面中添加验证逻辑,使得注册表单在传入后台之前先进行一次表单验证 在jsp文件里的 head 块里面添加 jQuery 代码 <script type=&q ...
- Angular自定义表单验证
前端表单验证 为年龄输入框添加了两个验证,并分情况填写了提示语 <form nz-form [formGroup]="validateForm"> <nz-for ...
- 仿照easy-ui并改进的表单验证
概述 easy-ui有自身的一套表单验证,扩展方便,但默认下也存在一些弱点,比如多规则验证.后台验证.远程异步验证等,这些功能要解决起来是比较吃力的.我仿照它的样式,写了一套前端表单验证的validB ...
随机推荐
- Mysql INNER JOIN
1.MySQL INNER JOIN子句将一个表中的行与其他表中的行进行匹配,并允许从两个表中查询包含列的行记录. 2.INNER JOIN子句是SELECT语句的可选部分,它出现在FROM子句之后. ...
- 《图解HTTP》阅读笔记--第四章--HTTP状态码
第四章.返回结果的HTTP状态码前言:状态码的职责是告诉用户服务器端描述返回的请求,以便用户判断服务器处理是否正常. 状态码由三位数字和原因短语组成,其中三位数字的首位指定了响应类别:---1xx 接 ...
- 利用zookeeper生成唯一id,通用性代码
在上篇中是写死的,这章就写出通用的 package com.cxy.com.cxy.curator; import java.util.concurrent.ExecutorService; impo ...
- Qt 学习之路 2(6):Qt 模块简介
Home / Qt 学习之路 2 / Qt 学习之路 2(6):Qt 模块简介 豆子 2012年8月26日 Qt 学习之路 2 20条评论 Qt 5 与 Qt 4 最大的一个区别之一是底层架构 ...
- COM编程快速入门
COM编程快速入门 COM编程快速入门 http://www.vckbase.com/index.php/wv/1642 COM是一种跨应用和语言共享二进制代码的方法.与C++不同,它提倡源代码重 ...
- Linux防火墙详解
1.Linux防火墙基础 作为隔离内外网.过滤非法数据的有力屏障,防火墙通常按实现环境的不同分为硬件防火墙和软件防火墙.硬件防火墙是功能专一的硬件设备,具有比较全面的功能,其工作效率较高,但是加个昂贵 ...
- 8.9zju集训日记
和新队员的第一次比赛,前期开题方向基本正确,签到的速度比较快,中期读了旋转卡壳,矩阵和km的三道题目,都有一定的想法,但三个人意见不同没有往一个方向想,但其实旋转卡壳和km的题目思路几乎都对了,但是旋 ...
- Linux 文件系统的目录结构
http://www.jb51.net/LINUXjishu/151820.htmlLinux下的文件系统为树形结构,入口为/ 树形结构下的文件目录: 无论哪个版本的Linux系统,都有这些目录,这些 ...
- vue(4)hello world
在前一章基础上开发. 1.下载vue.js.(https://cn.vuejs.org/v2/guide/installation.html) 在hello-vue根目录下创建js文件夹,并将该vue ...
- linux面试题:删除一个目录下的所有文件,但保留一个指定文件
面试题:删除一个目录下的所有文件,但保留一个指定文件 解答: 假设这个目录是/xx/,里面有file1,file2,file3..file10 十个文件 [root@oldboy xx]# touch ...