Angular 開發小妙招1：提交表單資料驗證不通過，更改輸入元件的樣式
開發表單時，客戶端資料完整性校驗是必不可少的，在jquery 時代出現了無數的資料驗證外掛也很好用，開發Angular 應用時，angular 內建了一些常用的資料驗證指令。今天要講的不是這些指令如何使用，今天講什麼呢，今天講一些關於驗證樣式的問題，相關的基礎知識在angular.cn 官方文件中都有介紹，在此就不多說了。但還有一些小的易用性方面的沒有在文件中指出。
比如：設定了必填後 （就是在input 中增加 required 屬性），表單載入完畢後，還沒有做任何操作時（無任何的鍵盤及滑鼠操作），input 控制元件自動的改變了樣式，比如紅色邊框，而我想著是在input 失去焦點後在新增紅色的邊框，這種情況咋搞呢，經過細緻的參考官方文件，我們可以設定樣式來達到這個效果，如：
.form-control.ng-invalid.ng-touched { border-color: red; }ng-invalid： 資料驗證不通過時新增的樣式名
ng-touched：失去焦點後新增的樣式名
新增以上樣式後，只有當input 失去焦點並且資料驗證不通過時邊框的顏色 才會為紅色。
如果表單載入完成後，我們直接點選提交按鈕會怎樣呢，假設我們的提交程式碼如下
public btnSubmit() {
if ( this.frm.valid ) {
......
}
}
此時表單的驗證狀態肯定是false , 資料驗證失敗，而控制元件上又沒有提示，怎麼辦？ 通過檢視瀏覽器原始碼發現input 中沒有ng-touched 樣式，如何新增上這個呢？各種百度 google 後得出，需要迴圈from 中的所有control，並呼叫每個control的markAsTouched 方法 程式碼大至如下：
public btnSubmit() {
Object.values( this.frm.controls).forEach( (c:FormControl) => c.markAsTouched()); // 新增這一句後，驗證失敗的input 會新增 ng-touched 樣式，控制元件的邊框就會變紅了
if ( this.frm.valid ) {
......
}
}
沒啥高深的內容，廢話有點多，就這樣吧
相關推薦
Angular 開發小妙招1：提交表單資料驗證不通過，更改輸入元件的樣式
開發表單時，客戶端資料完整性校驗是必不可少的，在jquery 時代出現了無數的資料驗證外掛也很好用，開發Angular 應用時，angular 內建了一些常用的資料驗證指令。今天要講的不是這些指令如何使用，今天講什麼呢，今天講一些關於驗證樣式的問題，相關的基礎知識在angular.cn 官方文件中都有介紹，在
SpringMVC4+thymeleaf3的一個簡單例項（篇四：form表單資料驗證）
關於表單資料驗證有很多中方法，這裡我僅介紹JSR303註解驗證。 注意在spring的配置檔案spring-mvc.xml中要有這句程式碼：<mvc:annotation-driven/>
JS：AJAX提交表單資料
方法一、前臺通過物件傳遞引數，後臺通過物件的屬性獲取值 jsp程式碼： $.ajax({ type: "POST", url:"/manage/admin/addOrUpdate", data:{
Spring Boot(三)：RestTemplate提交表單資料的三種方法
在REST介面的設計中，利用RestTemplate進行介面測試是種常見的方法，但在使用過程中，由於其方法引數眾多，很多同學又混淆了表單提交與Payload提交方式的差別，而且介面設計與傳統的瀏覽器使用的提交方式又有差異，經常出現各種各樣的錯誤，如405錯誤，或
微信小程式（十九）——表單資料提交和小程式表單賦值（組裝資料）
前端表單程式碼.wxml： <form > <view class='form-box'> <view class='form-item'>
html中提交表單並實現不跳轉頁面處理返回值
html value put 提示 pan sdn type detail all <html> <head> <script type="text/javascript" src="h
jQuery使用ajaxSubmit()提交表單（在不希望頁面跳轉的情況下）
ont .ajax 引入 當前 data fun get orm mit 原文：http://www.jb51.net/article/48728.htm ajaxSubmit(obj)方法是jQuery的一個插件jquery.form.js裏面的方法，所以使用此方法需要先
ajax提交表單資料不跳轉
1.onsubmit form表單的onsubmit方法在submit執行之前提交表單 <script type="text/javascript"> function sub() { // jquery 表單提交 $("#formI
ajax方式提交表單資料並判斷當前註冊使用者是否存在
專案的目錄結構 原始碼： regservlet.java package register; import java.io.IOException; import java.io.PrintWriter; import javax.servlet.ServletException; imp
使用httpclient提交表單資料加號（+）會被自動替換成空格的坑
坑的場景： 今天使用httpclient-4.5.3版本，傳送如下報文： { "idNo": "7+6+0+2ce722a546b39463bd62817fe57f8" }
使用SpringMVC 實現RESTful，並解決PUT，DELETE請求無法提交表單資料的問題
瞭解RESTful,使用SpringMVC 實現RESTful 關於REST: 1.表述性狀態轉移，是web服務的一種架構風格，是一種思想，而非標準或軟體。 2. 通常基於使用HTTP，URI，XML、JSON、HTML這些現廣泛流行的協議。 3.屬於輕量級（使
提交表單資料或阻止表單資料的提交(使用者輸入的資料不合法)
提交表單資料 單擊submit按鈕按鈕 表單元素使用From物件的submit()方法; (記住form裡面的表單元素有一個form屬性，它指向它所在的form元素, 也就是說在在表單元素的onclick事件裡用this.form.submit(); 即可提交
ajax（原生JavaScript）非同步提交表單資料
採用ajax非同步方式，通過js獲取form中所有input、select等元件的值，將這些值組成Json格式，通過非同步的方式與伺服器端進行互動， 一般將表單資料傳送給伺服器端，伺服器端處理資料並返
php 表單提交 表單前端驗證
//HTML 程式碼 <form id="form"> <input type="hidden" name="status" value="<?php echo $_GET['status'] ?>" /
通過jquery的serializearray處理表單資料成json格式，並提交到後臺處理
var params = $("#myform").serializeArray(); var values = {}; for (var item in params) { values[params[item].name] = params[item].value
spring mvc 防止重複提交表單的兩種方法，推薦第二種
第一種方法：判斷session中儲存的token 比較麻煩，每次在提交表單時都必須傳入上次的token。而且當一個頁面使用ajax時，多個表單提交就會有問題。 註解Token程式碼： package com.thinkgem.jeesite.common.re
使用標籤提交表單資料的問題以及獲取session作為函式的引數呼叫的問題
我在做動態網頁時遇到以下幾個問題，花了我好多時間才解決的。所以我要將它記錄下面，為我以後再次遇到問題作參考。若是大家覺得哪裡不對的，歡迎大家留言 1.不是表單一般是使用<input type="submit">提交按鈕，點選後就可以將表單中的資料提交了嗎？但是我
使用隱藏域input，提交表單未設定預設值，提交報錯400
1、 html表單如下： 紅色為正確程式碼，藍色為出錯程式碼<form action="operate_addenterandexit.html" method="post"> <div id="hidden" > <label>班組
Ajax提交表單資料
ajax的基本語法 $.ajax({ type: "post", //資料提交方式（post/get） url: "demo.php", //提交到的url data: {"key1":"value1","key2":"valu