HTML js使boeder变色

来源：互联网发布：node pm2 静态目录编辑：程序博客网时间：2024/05/20 02:22
<!DOCTYPE html><html><head><meta charset="utf-8" /><title></title><script src="js/anglarjs.min.js"></script><script src="js/angular-route.js"></script><script src="js/jquery-1.11.0.js"></script><style></style><script>var liu = angular.module("app",[]);liu.controller("democ",["$scope",function(a){var flag_length = true;var flag_xiangtong = true;var flag_null = true;a.type = "1";a.show = false;a.save = function(){if(a.pass_one == ""|| a.pass_one == undefined){a.errors.push("请输入密码");$("#pass").css("border-color","red");$("#pwd").css("border-color","red");}a.errors = [];if(!flag_null){a.errors.push("密码不能为空");}if(!flag_length){a.errors.push("密码长度要在6到20之间");}if(!flag_xiangtong){a.errors.push(("两次密码不相同"));}if(!flag_length||!flag_null||!flag_xiangtong){$("#pass").css("border-color","red");$("#pwd").css("border-color","red");}else{$("#pass").css("border-color","");$("#pwd").css("border-color","");}}a.panduan = function(){if(a.pass_one == "" || a.pass_one == undefined){flag_null = false;flag_length = false;}else{flag_null = true;}if(a.pass_one.length<6 || a.pass_one.length>20 ){flag_length = false;}else{flag_length = true;}if(a.pass_one == a.pass_two){flag_xiangtong = true;}else{flag_xiangtong = false;}if(a.type != "3"){a.errors = [];if(!flag_null){a.errors.push("密码不能为空");}if(!flag_length){a.errors.push("密码长度要在6到20之间");}if(!flag_xiangtong){a.errors.push(("两次密码不相同"));}if(!flag_length||!flag_null||!flag_xiangtong){$("#pass").css("border-color","red");$("#pwd").css("border-color","red");}else{$("#pass").css("border-color","");$("#pwd").css("border-color","");}}}}]);</script></head><body ng-app="app" ng-controller="democ">密码<input type="password" placeholder="6-20个字符" ng-model="pass_one" ng-blur="panduan()" id="pass" /><br />重复密码<input type="password" placeholder="再次输入密码" ng-model="pass_two" ng-blur="panduan()" id="pwd" /><br /><input type="button" style="background: greenyellow;" value="提交" ng-click="save()" /><br /><div ng-show="type!=1"><ul><li ng-repeat="a in errors">{{a}}</li></ul></div><hr />显示方式<br /><select ng-model="type"><option value="1">只有输入框样式变化</option><option value="2">显示错误提示</option><option value="3">点击提交后才显示错误提示</option></select></body></html>
阅读全文
0 0