Contenido de este artículo
Personas que pueden necesitarlo (orientado a objetos)
- Razones para escribir este blog
Soy un especialista en ingeniería. El conocimiento básico del front-end web involucrado en este artículo no es importante para mi especialización en nuestra escuela (clase de examen), pero es necesario tener más conocimientos. La verificación de validez del formulario JS es una de las tareas finales dejadas por el profesor. Para completarlo, he tirado durante dos o tres días, y también busqué y clasifiqué la información. Parte de la información funcional es útil para nuestros estudiantes en esta etapa .necesario. Así que aquí está para todos
-
Función de la tecla
-
Estructura de directorio de documentos JS
Validación del formulario JS de título
Esta publicación de blog está dedicada a estudiantes que necesitan exámenes finales y amigos que tienen problemas similares y necesitan ayuda
. Todo el código fuente involucrado en esta publicación (Baidu Netdisk):
Enlace: https://pan.baidu.com/s/14nFRIPbRjPpnhmn2VwEdEA Extracción código: 9kep
- Efecto JS de página web
Instrucciones para el uso de funciones individuales en la verificación de validez de JS
<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>
Domina document.write("<option id='ageid' value='"+i+"'>" + i + "</option>");este método de uso.
Código de función
<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>
La parte del código incluida en <script> </script> es parte de Jquery, y a menudo se agrega una <script src="js/jquery.1.11.min.js"></script>referencia similar a la etiqueta <head> <\ head> (no significa que se haga referencia al archivo)
- Dos formas de cotizar
El primero que usé, el primero definitivamente tendrá éxito, y el segundo a veces no tiene ningún efecto, tal vez porque no puedo usarlo.
-
Descargar referencia
Aquellos con jquery deben descargarse primero y colocarse en la carpeta 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 directa
Con 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>
- Enlace de tres niveles de año, mes y día Para
usar este código, primero debe tener el archivo en la carpeta jsbirthday.js, Y luego cite en la etiqueta <head> <\ head><script src="js/birthday.js" type="text/javascript" charset="utf-8"></script>
birthday.jsHay 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>
- Vinculación regional de segundo nivel (vinculación a nivel provincial y municipal)
, vinculación de tres niveles en el mismo año, mes y díabirthday.jsEl uso de la necesidad de cotizarcityinfo.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>
- Hay varias formas de verificar la validez del formulario.
Todos los métodos que se describen a continuación están enformtest.htmlArchivo.
- método uno
<!-- 用get方法提交 -->
<form name="form" target="_blank" method="get" action="提交成功.html">
<input type="submit" name="submit" value="提交">
</form> -->
- Método dos
<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 tres
<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>
- míaindex.htmlMétodos de verificación utilizados en:
<tr>
<td colspan="3" align="center" height="40">
<input type="button" value="提交" onclick="checkForm()"/>
</td>
</tr>
checkForm () enfunction.jsEn el archivo, las funciones y métodos escritos a mano en el archivo están todos en el archivo.
Muestre algunos fragmentos de código de checkForm () aquí:
...
//年龄
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
El disco de red no se limita a la función que se puede incrustar en el código html para realizar el formulario JS, y no se puede incrustar (de hecho, el código modificado se puede incrustar, pero para mí, no lo modifiqué correctamente, y está clasificado como no incrustado, nivel Xiaobian limitado), todos están en el documento, así que espero que todos hagan un buen uso, uso efectivo, se den cuenta de valor, se enriquezcan, si tienen alguna pregunta, déjenme un mensaje, yo generalmente lo verá!