Pessoas que podem precisar (orientado a objetos)

Razões para escrever este blog

Sou formado em engenharia.O conhecimento básico do front-end da web envolvido neste artigo não é importante para a minha especialização em nossa escola (classe de exame), mas é necessário ter mais conhecimento. A verificação da validade do formulário JS é uma das tarefas finais deixadas pelo professor. Para completá-la, eu joguei por dois ou três dias, e também procurei e classifiquei as informações. Algumas das informações funcionais são úteis para nossos alunos nesta fase. necessário. Então aqui está para todos

Função chave
Estrutura de diretório de documentos JS

Estrutura de diretório de documentos JS

Validação do título do formulário JS

Esta postagem do blog é dedicada a alunos que precisam de exames finais e amigos que têm problemas semelhantes e precisam de ajuda
. Todo o código-fonte envolvido nesta postagem (Baidu Netdisk):
Link: https://pan.baidu.com/s/14nFRIPbRjPpnhmn2VwEdEA Extraction código: 9kep

Efeito JS da página da web

Instruções para uso de funções individuais na verificação de validade JS

Seleção da caixa suspensa de idade

<tr>
	<td width="54" height="54" align="center">年龄:</td>
	<td height="30" align="left">
		<select id="ageSelectid" onblur="checkAge(ageSelectid,ageTS)">
				<option selected="selected">请选择</option>
				<script>
					for(var i = 10; i <= 110; i++) {
						document.write("<option id='ageid' value='"+i+"'>" + i + "</option>");
					}
				</script>
		</select>
	</td>
	<td bgcolor="#CCCCCC" align="center">
			<div id="ageTS"></div>
	</td>
</tr>

Domine document.write("<option id='ageid' value='"+i+"'>" + i + "</option>");este método de uso.

O perfil pessoal mostra o número de caracteres inseridos em tempo real

Código de função

<tr>
	<td width="54" height="80" align="center">个人简介:</td>
	<td height="left" >
			<!-- textarea标签之间最好紧挨着文本 这样在页面显示才会是顶格 -->
			<!-- 用JS检查输入的最少字符数-->
			<textarea class="textarea-inherit" id="" placeholder="亲!描述一下吧(最少十个字符)" rows="3" onblur="checkCount()"></textarea>
			<div >当前已输入<span id="count">0</span>个字符</div>
			<script type="text/javascript">
					$('textarea').bind('input propertychange',function(){
					$('#count').html($(this).val().length);
			});
			</script>
    </td>
	<td bgcolor="#CCCCCC" align="center"><font size="1" color="black"><div id="zsTS"></div></font></td>
</tr>

A parte do código incluída em <script> </script> é parte do Jquery e uma <script src="js/jquery.1.11.min.js"></script>referência semelhante é frequentemente adicionada à tag <head> <\ head> (isso não significa que o arquivo está referenciado)

Duas maneiras de citar

O primeiro que usei, o primeiro com certeza vai dar certo, e o segundo às vezes não tem efeito, talvez porque eu não possa usar.

Baixar referência

Aqueles com jquery precisam ser baixados primeiro e colocados na pasta js.

<head>
	...
	...
	<script src="js/jquery.1.11.min.js"></script>
	<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
</head>

Citação direta

Com URL<script src="http://cdn.bootcss.com/jquery/2.1.4/jquery.min.js"></script>

<head>
	<title>mailTips</title>
	<meta charset="utf-8">
	<script src="http://cdn.bootcss.com/jquery/2.1.4/jquery.min.js"></script>
	<script src="js/address.js"></script>
</head>

Ligação de três níveis de ano, mês e dia Para
usar este código, você deve primeiro ter o arquivo na pasta jsbirthday.jsE, em seguida, cite na tag <head> <\ head><script src="js/birthday.js" type="text/javascript" charset="utf-8"></script>
birthday.jsExistem tipos de Baidu Netdisk.

<tr>
	<td width="54" height="60" align="center">出生年月:</td>
	<td>
		<select name="" id="yearSelectid"></select>
		年
		<select name="" id="monthSelectid"></select>
		月
		<!--离开 日 文本框检测是否符合  -->
		<select name="" id="daySelectid" onblur="checkYMD(dateID)"></select>
		日
		<script>
			var ymd=new YMD('yearSelectid','monthSelectid','daySelectid');
			ymd.init();
		</script>
	</td>
	<td bgcolor="#CCCCCC" align="center">
		<div id="dateID"></div>
	</td>
</tr>

Ligação regional de segundo nível (ligação de nível provincial e municipal)
, ligação de três níveis no mesmo ano, mês e diabirthday.jsO uso da necessidade de citarcityinfo.js。

<tr>
	<td width="54" height="60" align="center">籍贯:</td>
	<td>
		<select name="province" id="province">
			<option selected id="1" value="请选择省份">请选择省份</option>
		</select>
		<select name="city" id="city" onblur="checkCity()">
			 <option selected id="2" value="请选择城市">请选择城市</option>
		</select>
	</td>
	<td bgcolor="#CCCCCC" align="center">
		<div id="cityTS"></div>
	</td>
</tr>

Existem várias maneiras de verificar a validade do formulário.
Todos os métodos descritos abaixo estão emformtest.htmlArquivo.

método um

<!-- 用get方法提交 -->
<form name="form" target="_blank" method="get" action="提交成功.html">
	<input type="submit" name="submit" value="提交">
</form> -->

Método Dois

<form id="form1" action="提交成功.html" method="get" onsubmit="return checkForm()">
	<input type="submit" value="提交">
	//或者<button type="submit">提交</button>
</form>	
	<script type="text/javascript">
		function checkForm(){
			var user= document.getElementById('user').value;
			var psw= document.getElementById('psd').value;
			if (...) {
				//如果验证不通过
				return false;
			} else {
				//验证通过
				return true;
			}
		}
	</script> -->

Método Três

<form id="form" action="提交成功.html" method="get">
	<input type="text" name="" id="user" value="" />
	<input type="button" value="提交" onclick="checkForm()"/>
</form>
<script type="text/javascript">
	function checkForm(){  
		var user= document.getElementById('user').value;
		 //var psw= document.getElementById('psd').value;  
				
		 if(!user){  
			//验证不通过 
			return false;  
		 }  
		 document.getElementById("form").submit();  
	} 
</script>

minhaindex.htmlMétodos de verificação usados em:

<tr>
	<td colspan="3" align="center"  height="40">
		<input type="button" value="提交" onclick="checkForm()"/>
	</td>
</tr>

checkForm () emfunction.jsNo arquivo, as funções e métodos escritos à mão no arquivo estão todos no arquivo.

Mostre alguns trechos de código de checkForm () aqui:

	...
	//年龄
	if(age.value=="请选择")
	{
		alert("请选择你的年龄!");
		age.focus();//自动把光标放到此组件上面，无须用户再次操作
		age.style.backgroundColor="bisque";
		return false;
	}
	age.style.backgroundColor="";
	...
	//个人简介
	if(count.innerHTML<10)
	{
		alert("至少输入十个字符哦!");
		document.getElementById('zsTS').parentNode.style.backgroundColor="bisque";
		//email.parentNode().style.backgroundColor="bisque";
		return false;
	}
	document.getElementById('zsTS').parentNode.style.backgroundColor="";
	...

Nota final

O disco de rede não se limita à função que pode ser embutida no código html para realizar o formulário JS, e não pode ser embutido (na verdade, o código modificado pode ser embutido, mas para mim, não o modifiquei com sucesso, e é classificado como não incorporado, nível Xiaobian limitado), todos estão no documento, então espero que todos façam bom uso, uso efetivo, percebam valor, se enriquecem, se você tiver alguma dúvida, deixe uma mensagem para mim, eu geralmente o verá!

Verificação da validade do formulário JS (envio do formulário / ano, mês, cascata de dias / província e cascata de cidade)

Conteúdo deste artigo

Pessoas que podem precisar (orientado a objetos)

Validação do título do formulário JS

Instruções para uso de funções individuais na verificação de validade JS

Nota final

Acho que você gosta