Javascript：简单的表单验证更改样式

知识点

运行效果

初始:

输入0-100:

输入错误:

每一次重新获得焦点样式都会重置

代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>#prompt{font-size: 13px;color:darkgrey;}#score{border: 1px solid darkgrey;}.right{background: url("正确.png") no-repeat 5px center ;background-size: 15px 15px;padding-left: 20px;color: #29ff16 !important;}.error{background: url("错误 (1).png") no-repeat 5px center ;background-size: 15px 15px;padding-left: 23px;color: red !important;}</style>
</head>
<body>
<div id="box"><label>您的成绩:</label><input type="text" placeholder="请输入成绩" id="score"><span id="prompt">请输入您的成绩!</span>
</div>
</body>
<script src="MyTools.js"></script>
<script>window.addEventListener('load',function () {var score = myTool.$('score');var prompt = myTool.$('prompt');// 当输入框失去焦点score.addEventListener('blur',function () {// 1. 获取输入内容 转为numbervar value = parseFloat(score.value);// 2. 验证if (isNaN(value)){  // 不是一个数dealStyle('输入成绩不正确!', 'error', 'red');}else if(value>= 0 && value<= 100){ //合法的dealStyle('输入成绩正确!', 'right', '#29ff16');}else{dealStyle('请输入0-100的数字!', 'error', 'red');}});// 当输入框获得焦点score.addEventListener('focus',function () {score.style.outline = 'none';score.value = '';dealStyle('请输入您的成绩', '', 'darkgrey');});/*** 处理公共样式* @param {string}msg* @param {string}className* @param {string}color*/function dealStyle(msg, className, color) {prompt.innerText = msg;prompt.className = className;score.style.borderColor = color;}});
</script>
</html>

Javascript：简单的表单验证更改样式相关推荐

jQuery之简单的表单验证
jQuery之简单的表单验证 html部分: <body><form method="post" action=""><div c ...
angularjs学习第四天笔记（第一篇：简单的表单验证）
您好,我是一名后端开发工程师,由于工作需要,现在系统的从0开始学习前端js框架之angular,每天把学习的一些心得分享出来,如果有什么说的不对的地方,请多多指正,多多包涵我这个前端菜鸟,欢迎大家的点 ...
用jQuery写的最简单的表单验证
近几天完成了关于我们项目的最简单的表单验证,是用jQuery写的,由于之前也一直没学过jQuery,所以自己也是一直处于边摸索边学习的阶段,经过这一段时间的学习,通过查资料啥的,也发现了学习jQuer ...
JavaScript 正则表达式实现表单验证
表单验证效果图: 输入格式正确: 输入格式错误: 基本代码如下: <!DOCTYPE html> <html><head><meta charset=&qu ...
JavaScript基础-form表单验证
表单验证的两种方式: 一.使用alert提示框 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"& ...
JavaScript中的表单验证、正则表达式、数组的使用
表单验证.正则表达式.数组字符串的使用为什么要使用表单验证表单验证的常用步骤提交表单的2种方式文本框对象为什么要使用正则表达式正则表达式的两种创建方法正则表达式的模式正则表达式常用的 ...
JS正则表达式实现简单的表单验证（账号，密码，手机号）
首先有三个文本框,和一个提交按钮,第一个输入账号,第二个密码,第三个手机号我们的需求:判断3个文本框是否全部输入正确,当我们点击提交时,如果有一个输入错误则不能提交,全部输入正确则提交成功: 下面直 ...
Vue简单的表单验证
前端验证必不可少~ 输入框验证 vue文件部分: <form :model="form" :rules="rules" ref="form&qu ...
JavaScript的form表单验证中的身份证校验
前几天,在项目中遇到一个问题,就是这个身份证校验,一般普通人的身份证号是有18位,当时我只想到了限制长度来做验证,因为着急下班,哈哈哈哈哈直到昨天,才想到JavaScript中有个正则表达式,所以我 ...
用jquery实现简单的表单验证
HTML代码: 1 <form action="" method="post" id="form-data">2 <div ...

Javascript：简单的表单验证更改样式

知识点

运行效果

代码

Javascript：简单的表单验证更改样式相关推荐

最新文章

热门文章