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之[调试]与[前端表单验证]的更多相关文章

  1. jQuery/javascript实现网页注册的表单验证

    <html> <head> <meta charset="utf-8"> <title>注册表单验证</title> & ...

  2. jQuery简单前端表单验证

    <!DOCTYPE html> <html> <head> <title>表单验证</title> <script src=" ...

  3. 前端表单验证常用的15个JS正则表达式

    在表单验证中,使用正则表达式来验证正确与否是一个很频繁的操作,本文收集整理了15个常用的javaScript正则表达式,其中包括用户名.密码强度.整数.数字.电子邮件地址(Email).手机号码.身份 ...

  4. 最常用的15个前端表单验证JS正则表达式

    在表单验证中,使用正则表达式来验证正确与否是一个很频繁的操作,本文收集整理了15个常用的JavaScript正则表达式,其中包括用户名.密码强度.整数.数字.电子邮件地址(Email).手机号码.身份 ...

  5. JavaScript入门学习笔记(表单验证)

    表单验证: 在数据被送到服务器之前对HTML表单中的输入数据进行验证,避免服务器频繁验证信息造成用户体验差. (1)表单数据是否为空 (2)输入的信息格式是否正确 (3)输入数据的类型是否正确 必填( ...

  6. Web前端表单验证

    表单选择器 :input(匹配所有input.textarea.select和button元素)   :text(匹配所有单行文本框)   :password(匹配所有密码框)   :radio(匹配 ...

  7. 4.前端注册表单验证 && 表单回填

    表单验证 前端表单验证就是在 jsp 页面中添加验证逻辑,使得注册表单在传入后台之前先进行一次表单验证 在jsp文件里的 head 块里面添加 jQuery 代码 <script type=&q ...

  8. Angular自定义表单验证

    前端表单验证 为年龄输入框添加了两个验证,并分情况填写了提示语 <form nz-form [formGroup]="validateForm"> <nz-for ...

  9. 仿照easy-ui并改进的表单验证

    概述 easy-ui有自身的一套表单验证,扩展方便,但默认下也存在一些弱点,比如多规则验证.后台验证.远程异步验证等,这些功能要解决起来是比较吃力的.我仿照它的样式,写了一套前端表单验证的validB ...

随机推荐

  1. ios对new Date() 的兼容问题

    移动开发的一个小坑 我们一般这样创建一个日期变量 var d = new Date("2017-08-11 12:00:00"); 但是在ios上却是返回 invalid Date ...

  2. springcloud系列二 搭建注册中心启动

    创建modul 然后就创建完成了 添加yml文件: server: port: eureka: client: register-with-eureka: false #单机版建议设置为false,设 ...

  3. Linux中Mysql安装卸载

    参考博客:https://www.cnblogs.com/xrog/p/6862669.html安装步骤:#wget http://dev.mysql.com/get/mysql57-communit ...

  4. (转)接口自动化测试之http请求实践总结

    一.接口测试的基本思路 1.确定要测试接口的请求类型.接口是get请求还是post请求. 2.确定接口的参数.需要传输的参数有哪些,类型分别是什么,都有哪些要求等. 3.按照参数要求构造请求需要的参数 ...

  5. 《C程序设计II》简易计算器,杨辉,数字杯子图形

    <C程序设计II>简易计算器,杨辉,数字杯子图形.<C程序设计II>简易计算器,杨辉,数字杯子图形.<C程序设计II>简易计算器,杨辉,数字杯子图形. <C程 ...

  6. 使用Entity Framwork 保存数据时,提示不能在对象中插入重复键,违反了PRIMARY_KEY约束

    这种情况,大多发生在有外键存在的情况下,解决方法是: 把dataContext.Set<T>().Add(model)修改成dataContext.Models.Add(model);

  7. 读经典——《CLR via C#》(Jeffrey Richter著) 笔记_值类型的装箱和拆箱(二)

    [注意]:如果知道自己写的代码会造成编译器反复对一个值类型进行装箱,请改成用手动方式对值类型进行装箱. [好处]:代码会变得更小.更快. [例子]: using System; public seal ...

  8. jquery知识点结合使用

    1.在页面的某个具有id的element内插入其他element,并给其增加悬浮提示. $('#id').after('<div id='box'></div>'); $('# ...

  9. PHP7.1新特性一览

    PHP7.0的性能是PHP5.6的两倍 http://www.phpchina.com/article-40237-1.html 可空类型 list 的方括号简写 void 返回类型 类常量属性设定 ...

  10. java中Excel导出

    转载:https://www.cnblogs.com/gudongcheng/p/8268909.html,稍加修改了 https://www.cnblogs.com/hanfeihanfei/p/7 ...