作者:pratnket
版本:2017_Var1
javascript系列课程Days-1
javascript系列课程Days-2
javascript系列课程Days-3
使用页
<html><head><script src="Verificat.js"></script><script>function log(msg) {if( window.console ) {console.log(msg);}}//使用方式,自订DOM名称//入口function ck(name) {return document.getElementById(name);}//入口function $(name) {return document.getElementById(name);}window.onload = function() {//简易用法//onclick="Verificat.Form()"//程式用法--(sub) = Submit 的 name//程式用法-- ck 函式/* ck("sub").onclick = function() {//检查表单Verificat.Form();//Verificat.result() 呼叫判断结果if( Verificat.result() == true ) alert("表单验证成功");if( Verificat.result() == false ) alert("表单验证失败"); };*///我用JQ的符号测试 $("sub").onclick = function() {//检查表单Verificat.Form();//Verificat.result() 呼叫判断结果if( Verificat.result() == true ) alert("表单验证成功");if( Verificat.result() == false ) alert("表单验证失败"); };};</script></head><body><form id="Form">数值1: <input id="fname" type="text" value="Mickey" />数值2: <input id="lname" type="text" value="Mouse" required="" />数值3: <input id="lname2" type="text" value="Mouse" required="" />数值4: <input id="lname3" type="text" value="Mouse" required="" /><input id="sub" name="sub" type="button" value="Submit"/></form></body></html>
JS页
(function () {//预设值var options = {Form: 'Form',Placeholder: '请填写入数值',Style: 'background-color:powderblue',Msg: '你尚有内容未填写',Bool: true,}//APIvar api = {//修改预设值config: function (opts) {if(!opts) return options;for(var key in opts) {options[key] = opts[key];}return this;},Form: function Form() {var result = options.Bool;var x = document.getElementById(options.Form);for (var i=0 ; i < x.length ; i++){if(x.elements[i].required){if (x.elements[i].value==null || x.elements[i].value==""){x.elements[i].style = options.Style;x.elements[i].placeholder = options.Placeholder;var result = false;}}} //result || (alert(options.Msg));options.Bool = result;return result;},result: function result() {return options.Bool;}}this.Verificat = api;})();